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

grouping nodeList elements into separate Groups

本文关键字：单独 元素 nodeList      更新时间：2023-09-26

我有以下节点列表

['<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>

我不明白如何做到这一点。有人能帮我做这个吗。

您可以简单地循环您的项目，并将其中的每个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>

使用以下

比方说

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++;
  });
}
相关文章：