código jQuery wrap después de x número de elementos

Question

Tengo un UL que contiene cualquier número de LI. Intento crear un código jQuery que analizará el UL original y ajustará un UL y otro LI después de cada 5 de los LI originales.

HTML de inicio:

<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> 

Obligatorio 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 --> 

He estado usando la función each que pasar por el Lis y los añade a la nueva ul procesado dentro de una división temporal ... ahora solo necesito envolver el nuevo LI y UL alrededor de cada 5 LI.

Gracias de antemano!

Al

Answer 1

Usted puede hacer esto:

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

Esto los mantiene en el mismo elemento #original_ul, pero sólo podría cambiar el ID de si eso es necesario. Este enfoque genera el código HTML de salida exacta que tiene en la cuestión aparte de la identificación en la parte superior <ul>

Answer 2

Puede usar un bucle.

Por ejemplo: (no probado)

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

Algo como esto lo hará:

$('#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>'); 
    });