regroupement des éléments de nodeList dans des groupes distincts

Question

Je suivants nodeList

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

et fonction suivante qui accepte le nombre d'élément pour un groupe et génère groupe d'éléments enveloppés par divs

function groupElms (nOfElms) { 
    var count = 0; 

    [].forEach.call(nL, function (item) { 



    count++; 
    }); 

} 

permet de dire noOfElms est 2 alors la fonction devrait générer des éléments comme ceci

si noOfElms est 3, il devrait être comme

<div> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
</div> 
<div> 
    <div class="item">4</div> 
</div> 

Je ne comprends pas comment y parvenir. S'il vous plaît quelqu'un pourrait m'aider avec ça.

Answer 1

Vous pouvez faire une boucle à travers vos articles et placez tous les N d'entre eux dans un wrapper créé comme ceci:

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>

Notez qu'il est supposé que tous ces éléments sont frères et sœurs. Sinon, ils seront tous déplacés vers le parent du premier élément.

Il peut être fait encore plus facile d'utiliser la fonction 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

utilisez les touches suivantes

permet de dire

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

alors la fonction doit être écrit comme suit

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

}