javascript - 将 nodeList 元素分组到单独的组中

Question

我有以下节点列表

['<div class="item">1</div>', '<div class="item">2</div>', '<div class="item">3</div>', '<div class="item">4</div>']

和下面的函数，它接受一组元素的数量并生成由 divs 包裹的元素组

function groupElms (nOfElms) {
  var count = 0;

  [].forEach.call(nL, function (item) {



    count++;
  });

}

假设 noOfElms 是 2 那么该函数应该像这样生成元素

<div>
  <div class="item">1</div>
  <div class="item">2</div>
</div>
<div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

如果 noOfElms 是 3，它应该是这样的

<div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div>
  <div class="item">4</div>
</div>

我不明白如何实现这一目标。请有人帮我解决这个问题。

Answer 1

您可以简单地遍历您的项目并将它们的每 N 放入一个创建的包装器中，如下所示:

function groupNodes(list, groupBy)
{
  var list = [].slice.call(list);
  var parent = list[0].parentElement;

  for (var i = 0; i < list.length; i += groupBy)
  {
      var lastWrapper = document.createElement('div');
      lastWrapper.className = 'wrapper';
      parent.appendChild(lastWrapper);
  
      [].forEach.call(list.slice(i, i + groupBy), function(x) {
          lastWrapper.appendChild(x);
      });
  }  
}

groupNodes(document.getElementsByClassName('item'), 3);

.wrapper {
  border: 2px solid black;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

请注意，假设所有这些项目都是 sibling 。否则，它们都将移动到第一个项目的父级。

使用 jQuery .wrap() 函数可以更轻松地完成:

function groupNodes(selector, groupBy)
{
  var $list = $(selector);

  for (var i = 0; i < $list.length; i += groupBy)
      $list.slice(i, i + groupBy).wrapAll('<div class="wrapper"></div>');
}

groupNodes('.item', 3);

.wrapper {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>