每 3 个元素包裹一个父元素-PHP中文网问答

我只是想用一类搜索音频将一个 div 与幻灯片类包裹在每 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 包裹在新的分组元素数组周围。

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>

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 { 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; }

全部回复(2)

P粉4890817322024-04-03 12:01:37 2楼

我认为你有点过于复杂了，可以通过使用 :nth-child 将 .search-audio 的样式应用到 .slide 类的每个第三个 div 来使用 CSS。

这段代码可能是错误的，但类似于：

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

以下是一些可能有助于学习如何使用它们的链接：

https://developer.mozilla.org/ en-US/docs/Web/CSS/:nth-child

赞 +0

添加回复

P粉0128759272024-04-03 09:47:30 1楼

问题是 elem 不是单个元素，它是由 groupBlocks() 创建的 3 个元素的数组。所以没有 elem.parentElement。

使用 elem[0].parentElement 获取所有元素的公共父元素。然后循环它们以将每个元素附加到新的 div 中。

我在下面的代码中将 elem 重命名为 group，以更正确地匹配它包含的内容。