группировка нодлиста элементов на отдельные группы

Question

я следующее нодлисте

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

Обратите внимание, что предполагается, что все эти элементы являются братьями и сестрами. В противном случае все они будут перемещены в родительский элемент первого элемента.

Это можно сделать еще проще с помощью 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>

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

}