javascript 每隔3个元素 Package 一个父元素

rdrgkggo  于 2023-05-21  发布在  Java
关注(0)|答案(3)|浏览(105)

我只是想 Package 一个div w类的幻灯片周围的每3个div类的搜索音频。
我遇到的一个错误是它说elem.parentElement是未定义的…
所以部分工作很好...

const audioBlocks = document.querySelectorAll('.search-audio');
const slider = document.querySelector('.slider');
const audioBlockArr = Array.from(audioBlocks);

function groupBlocks(arr, len) {

    let groups = [],
        i = 0,
        n = arr.length;
  
    while (i < n) {
      groups.push(arr.slice(i, i += len));
    }
  
    return groups;
  }

newArr = [...groupBlocks(audioBlockArr, 3)];

问题就出在这里--用一个div Package 新的分组元素数组。

let wrap = (array) => {
  
  array.forEach((elem) => {
    let div = document.createElement('div');
    div.classList.add('slide');
    div.innerHTML = '';

    elem.parentElement.insertBefore(div, elem);
    div.appendChild(elem);
  });
}

wrap(newArr);

完整代码：

const audioBlocks = document.querySelectorAll('.search-audio');
const slider = document.querySelector('.slider');
const audioBlockArr = Array.from(audioBlocks);

function groupBlocks(arr, len) {

  let groups = [],
    i = 0,
    n = arr.length;

  while (i < n) {
    groups.push(arr.slice(i, i += len));
  }

  return groups;
}

newArr = [...groupBlocks(audioBlockArr, 3)];

let wrap = (array) => {
  array.forEach((elem) => {
    let div = document.createElement('div');
    div.classList.add('slide');
    div.innerHTML = '';

    elem.parentElement.insertBefore(div, elem);
    div.appendChild(elem);
  });
}

wrap(newArr);
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.search-audio {
  height: 12rem;
  width: 12rem;
  background: rgb(255, 153, 0);
  margin: .5rem;
  display: inline-block;
}

.slide {
  background-color: #555;
}
<body>
  <div class="slider">
    <div class="search-audio 1"></div>
    <div class="search-audio 2"></div>
    <div class="search-audio 3"></div>
    <div class="search-audio 4"></div>
    <div class="search-audio 5"></div>
    <div class="search-audio 6"></div>
    <div class="search-audio 7"></div>
    <div class="search-audio 8"></div>
    <div class="search-audio 9"></div>
    <div class="search-audio 10"></div>
    <div class="search-audio 11"></div>
    <div class="search-audio 12"></div>
    <div class="search-audio 13"></div>
    <div class="search-audio 14"></div>
    <div class="search-audio 15"></div>
    <div class="search-audio 16"></div>
    <div class="search-audio 17"></div>
    <div class="search-audio 18"></div>
    <div class="search-audio 19"></div>
    <div class="search-audio 20"></div>
  </div>
</body>

</html>
JavaScript

3条答案

按热度按时间
jjjwad0x

jjjwad0x1#

问题是elem不是一个单一的元素，它是由groupBlocks()创建的3个元素的数组。所以没有elem.parentElement。
使用elem[0].parentElement获取所有元素的公共父元素。然后循环遍历它们以将每个元素追加到新的div。
在下面的代码中，我将elem重命名为group，以便更正确地匹配它所包含的内容。

const audioBlocks = document.querySelectorAll('.search-audio');
const slider = document.querySelector('.slider');
const audioBlockArr = Array.from(audioBlocks);

function groupBlocks(arr, len) {

  let groups = [],
    i = 0,
    n = arr.length;

  while (i < n) {
    groups.push(arr.slice(i, i += len));
  }

  return groups;
}

newArr = [...groupBlocks(audioBlockArr, 3)];

let wrap = (array) => {
  array.forEach((group) => {
    let div = document.createElement('div');
    div.classList.add('slide');
    div.innerHTML = '';

    group[0].parentElement.insertBefore(div, group[0]);
    group.forEach(elem => div.appendChild(elem));
  });
}

wrap(newArr);
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.search-audio {
  height: 12rem;
  width: 12rem;
  background: rgb(255, 153, 0);
  margin: .5rem;
  display: inline-block;
}

.slide {
  background-color: #555;
}
<body>
  <div class="slider">
    <div class="search-audio 1"></div>
    <div class="search-audio 2"></div>
    <div class="search-audio 3"></div>
    <div class="search-audio 4"></div>
    <div class="search-audio 5"></div>
    <div class="search-audio 6"></div>
    <div class="search-audio 7"></div>
    <div class="search-audio 8"></div>
    <div class="search-audio 9"></div>
    <div class="search-audio 10"></div>
    <div class="search-audio 11"></div>
    <div class="search-audio 12"></div>
    <div class="search-audio 13"></div>
    <div class="search-audio 14"></div>
    <div class="search-audio 15"></div>
    <div class="search-audio 16"></div>
    <div class="search-audio 17"></div>
    <div class="search-audio 18"></div>
    <div class="search-audio 19"></div>
    <div class="search-audio 20"></div>
  </div>
</body>

</html>
赞(0）分享  回复(0）举报  2023-05-21
3npbholx

3npbholx2#

我认为你把它弄得有点复杂了，可以使用CSS来实现这一点，使用:nth-child将.search-audio的样式应用到.slide类的每个第三个div。
这段代码可能是错误的，但类似于：

.slide:nth-child(3n) {
  /* move styles here from .search-audo */
}

这里有一些链接，可能有助于学习如何使用它们：

赞(0）分享  回复(0）举报  2023-05-21
bzzcjhmw

bzzcjhmw3#

首先要注意的是：classNames不能是数字（class="search-audio 1）。
下面是一个代码片段，它使用reducer将元素分成3个一组，然后将这些组 Package 在grouping元素中。

// create groups of 3
const sliderGroups = [...document.querySelectorAll(`.search-audio`)]
  .reduce((acc, el, i) => {
    if (i && i%3 == 0) {
      acc = [...acc, []];
    }
    acc[acc.length - 1] = acc[acc.length - 1].concat(el);
    return acc;
  }, [[]]);
// now you have an array of arrays 
// with each 3 elements. Let's wrap
// those
wrap(sliderGroups);

function wrap (array) {
  // a wrapper base Node
  const wrapperElem = Object.assign(
    document.createElement(`div`), {className: `slideGroup`});
  const sliderCollection = document.querySelector(`.slider`);
  array.forEach( elemGroup => {
    // create a new wrapper Node from the base
    const wrap = wrapperElem.cloneNode();
    // append it to div.slider
    sliderCollection.append(wrap);
    // append *moves* the (life) elements of
    // the current group to the wrap element
    wrap.append(...elemGroup);
  });
}
.search-audio:after {
  content: "search-audio elem";
  color: red;
  margin-left: 6px;
}

.slideGroup:before {
  content: "slide group";
  color: green;
}
<div class="slider">
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio]"></div>
    <div class="search-audio]"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
    <div class="search-audio"></div>
</div>
赞(0）分享  回复(0）举报  2023-05-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com