comment les éléments de la liste groupe à l'aide jquery

Question

Quelqu'un peut-il me aider à convertir le code HTML suivant

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

dans celui-ci

<ul> 
    <li class="li_group"> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
    </ul> 
    </li> 
    <li class="li_group"> 
    <ul> 
     <li>3</li> 
     <li>4</li> 
    </ul> 
    </li> 
</ul 

en utilisant jQuery?

Merci!

Answer 1

Ce qui suit devrait faire l'affaire ...

var $liWrapper = $("<li class='li_group'><ul></ul></li>"); 
$("li").slice(0,2).wrapAll($liWrapper) 
     .end() 
     .slice(2,4).wrapAll($liWrapper); 

Answer 2

Je devine que vous pouvez finir par avoir besoin de faire cela pour un nombre différent d'éléments. Ma solution inclut une boucle while. Ajustez le nombre dans la condition while() et dans le sélecteur pour: lt (2) pour capturer un nombre différent d'éléments de liste.

<ul id="divide"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 


<script type="text/javascript"> 
while ($('ul#divide > li[class!="li_group"]:lt(2)').length >= 1) { 
    $('ul#divide > li[class!="li_group"]:lt(2)') 
     .wrapAll('<li class="li_group"><ul></ul></li>'); 
} 
</script> 

Lors du débogage, j'ai utilisé ce CSS pour m'assurer que je produisais le bon code HTML.

<style type="text/css"> 
ul { border: 1px solid #f00; } 
.li_group { border: 1px solid #00f; } 
</style> 

Answer 3

Voici ma solution:

fonction Jquery:

jQuery.fn.groupListElement = function() { 

    var $list = $(this[0]); 
    var args = arguments[0] || {}; 
    var groupClassName = args.groupClassName || 'li_group'; 
    var size = args.size || 2; 

    if ($list.length > 0) { 

     var wrapper = '<li class="' + groupClassName + '"><ul></ul></li>'; 

     while ($('> li[class!="' + groupClassName + '"]',$list).slice(0, size).length >= 1) { 
      $('> li[class!="' + groupClassName + '"]',$list).slice(0, size) 
       .wrapAll(wrapper); 
     } 

    } 

    return $list; 

}; 

appel à la fonction

$('ul').groupListElement({groupClassName: 'li_group', size : 3}); 

Utilisation avec Jquery Cycle:

$('ul') 
.groupListElement({groupClassName: 'li_group', size : 3}) 
.cycle(); 

Amusez-vous!