La meilleure façon de sélectionner des éléments de n à un moment jQuery

Question

J'ai un ul de li éléments, ce que je veux faire est la suivante:

1. S'il y a 6 ou moins li éléments, sélectionnez-les tous et mettre les dans un nouveau ul.
2. Pour tout nombre supérieur à 6 éléments, passez en boucle, en sélectionnant 6 éléments, placez le nouveau ul, commencez à l'élément li suivant et continuez.
3. S'il reste moins de 6 éléments à la fin, ils sont également placés dans un nouveau ul.

Si je commence avec 5 li éléments, j'espère finir avec 1 élément ul avec 5 li enfants.

Si je commence avec 40 éléments li, j'espère finir avec 7 éléments ul, 6 avec 6 li enfants et 1 avec 4.

Quelle serait la façon la plus efficace de traiter ce jQuery ?

Answer 1

Vous pouvez le faire en boucle sur et en utilisant .slice() avec .wrapAll(), comme ceci:

var lis = $("#myUL li"); 
for(var i = 0; i < lis.length; i+=6) { 
    lis.slice(i, i+6).wrapAll("<li><ul></ul></li>"); 
} 

You can test it out here. Notez que cette version crée éléments imbriqués<ul> à l'intérieur de l'original (dans leur propre <li> donc c'est valide). Si vous ne voulez pas et que vous voulez remplacer le <ul> original, .unwrap() d'abord comme ceci:

var lis = $("#myUL li").unwrap(); 
for(var i = 0; i < lis.length; i+=6) { 
    lis.slice(i, i+6).wrapAll("<ul></ul>"); 
} 

You can test that version here.

Answer 2

Je vous recommande de garder une trace du nombre d'éléments à l'intérieur de l'UL. Par exemple, vous pouvez définir une variable globale comme celui-ci en haut de la page:

<script type="text/javascript"> 
var listItems = 0; 
</script> 

Increment cette variable à chaque fois que de nouveaux éléments sont ajoutés à la liste. S'ils sont ajoutés en boucle à travers un tableau PHP (ou l'équivalent dans d'autres langues), faites ceci:

<? foreach ($items as $item):?> 
    <script type="text/javascript"> 
    listItems++; 
    </script> 
    <li><?=$item;?> 
<?endforeach;?> 

S'ils sont ajoutés par javascript, faire quelque chose comme ceci:

function addToList(item) 
{ 
    listItems++; 
    $("#list").append("<li>" + item + "</li>"); 
} 

Ensuite, , vous pouvez utiliser cette variable pour déterminer le nombre d'éléments dans le ul, par exemple:

if (listItems < 6) 
    //Do something 
else 
    // Do something else 

Answer 3

Voici une autre solution.

var lis = $('#myul li:eq(0), #myul li:nth-child(6n+1)'), // get first and 6n+1 
    result = $('#result'); 

lis.each(function(el, i){ 
    var nextSix = $(this).nextAll(':lt(5)').andSelf().clone(); // take next 6 copy 
    $('<ul/>').append(nextSix) // create new ul add lis 
     .appendTo(result); // add to container 
}); 

http://jsfiddle.net/9GFf6/