每3个.search-audio元素包裹.slide容器时，elem.parentElement未定义问题

尝试将每3个带有search-audio类的div用slide类的div包裹，分组代码可正常运行，但包裹逻辑报错elem.parentElement is undefined。

分组代码（可正常运行） #

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);

错误原因 #

newArr是二维数组，每个元素是包含3个DOM节点的子数组。调用wrap(newArr)时，array.forEach遍历的是这些子数组而非单个DOM元素，此时elem是数组，不是DOM节点，因此不存在parentElement属性。

修正后的完整代码 #

JavaScript #

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

const newArr = groupBlocks(audioBlockArr, 3);

const wrap = (groups) => {
  groups.forEach(group => {
    if (group.length === 0) return;
    // 创建slide容器
    const slideDiv = document.createElement('div');
    slideDiv.classList.add('slide');
    // 获取分组第一个元素的父节点和插入基准位置
    const parent = group[0].parentElement;
    const firstElem = group[0];
    // 插入容器到第一个元素之前
    parent.insertBefore(slideDiv, firstElem);
    // 将分组内所有元素移入容器
    group.forEach(elem => slideDiv.appendChild(elem));
  });
}

wrap(newArr);

CSS #

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;
  margin: 1rem 0;
  display: inline-block;
}

HTML #

<body>
  <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>
</body>
</html>

修正说明 #

修改后的wrap函数会遍历每个分组：

1. 跳过空分组，避免无意义操作
2. 针对有效分组创建slide容器
3. 通过分组第一个元素定位父节点，将容器插入到分组的起始位置前
4. 把分组内所有DOM元素批量移入容器中

内容的提问来源于stack exchange，提问作者Emily Childers