jQuery wrap code after x number of elements

Question

Ho un UL che contiene un numero qualsiasi di LI. Sto cercando di creare un codice jQuery che analizzerà l'UL originale e avvolgerà un UL e un altro LI ogni 5 dei LI originali.

partire HTML:

<ul id="original_ul"> 
    <li class="original_li">..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
    <li>..</li> 
</ul> 

richiesto HTML:

<ul id="processed_ul"> 

    <li class="new_wrap_li"> 

     <ul class="new_wrap_ul"> 

      <li class="original_li">..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 

     </ul><!-- end new wrap ul --> 

    </li><!-- end new wrap li --> 

    <li class="new_wrap_li"> 

     <ul class="new_wrap_ul"> 

      <li class="original_li">..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 
      <li>..</li> 

     </ul><!-- end new wrap ul --> 

    </li><!-- end new wrap li --> 

</ul><!-- end processed ul --> 

Sto usando la funzione .each di passare attraverso LIS e li aggiunge alla nuova ul elaborati tenuto all'interno di un div temp ... ora ho solo bisogno di avvolgere i nuovi LI e UL intorno a ogni 5 LI.

Grazie in anticipo !!

Al

Answer 1

Si può fare questo:

var lis = $("#original_ul li"); 
for(var i = 0; i < lis.length; i+=5) { 
    lis.slice(i, i+5) 
    .wrapAll("<li class='new_wrap_li'><ul class='new_wrap_ul'></ul></li>"); 
} 

Questo li tiene nella stessa #original_ul elemento, ma si potrebbe semplicemente modificare l'ID, se questo è necessario. Questo approccio genera l'esatto html di uscita si ha nella questione a parte l'ID in alto <ul>

Answer 2

È possibile utilizzare un ciclo.

Ad esempio: (testato)

while($('ul#original li').length) { 
    var newContainer = $('<li class="new_wrap_li"><ul class="new_wrap_ul" /></li>') 
     .appendTo('#processed_ul'); 


    $('ul#original li:lt(4)').detach().appendTo(newContainer.children('ul')); 
} 

Answer 3

Qualcosa di simile lo farà:

$('#original_ul').find('li:nth-child(5n)').each(function(){ 
    $(this).prevAll('li').andSelf() 
     .wrapAll('<ul class="new_wrap_ul"></ul>'); 
}).end().find('ul').wrap('<li class="new_wrap_li"></li>') 
.find('li:first-child').addClass('original_li'); 

Answer 4

jQuery('ul#original_ul').attr('id', 'processed_ul') 
    .find('li:nth-child(5n)').each(function() { 
     $(this).prevAll('li').andSelf() 
      .wrapAll('<li class="new_wrap_li"><ul class="new_wrap_ul"></ul></li>'); 
    });