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

【问题标题】：grouping nodeList elements into separate Groups将 nodeList 元素分组到单独的组中
【发布时间】：2016-02-13 12:02:35
【问题描述】：

我有以下节点列表

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

以及以下函数，它接受一个组的元素数量并生成由 div 包裹的一组元素

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>

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

【问题讨论】：

标签： javascript html foreach nodelist

【解决方案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>

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

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

【讨论】：

@SameeraAbeywickrama 我很高兴听到它。我已经用 jQuery 方法更新了我的答案，如果它适合你的话，它会更短更简单。

【解决方案2】：

使用下面的

让我们说

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

}

【讨论】：

谢谢拉杰什。这个逻辑会起作用。但要注意的一件事是您不能在 nodeLists 上调用 foreach。所以a.forEach 不起作用。 :)
是的，我忘记了，抱歉，您可以使用[].forEach.call(a, function (item) { });