将 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

使用以下内容

让我们说

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

那么函数应该这样写

function groupElms (nOfElms) {
    var count = 1;

    a.forEach(function (item) {
    if(count == 1) {
       var tempDiv = document.createElement("div");
    }

    tempDiv.appendChild(item);
    if(count == nOfElms) {
       document.body.appendChild(tempDiv);
      delete tempDiv;
      count=1;
    }
        count++;
  });

}

Answer 2

您可以简单地遍历您的项目并将它们中的每个 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>

请注意，假设所有这些项目都是兄弟姐妹。否则，它们将全部移动到第一项的父级。

使用 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>

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

grouping nodeList elements into separate Groups

javascript

html

foreach

nodelist