Question

我有以下nodeList

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

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

Answer 1

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

＆＃13;

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

＆＃13;

.wrapper {
  border: 2px solid black;
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

.wrapper {
  border: 2px solid black;
}

＆＃13;

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

＆＃13;

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

}

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

2 个答案: