.slice y .wrapall

Question

Estoy usando un poco de código sugerido por un miembro en stackoverflow y adaptado por mí para envolver cada 3 elementos de lista como parte de un mega menú. El código es:

var lis = $("ul > li"); 
for(var i = 0; i < ls.length; i+=3) { 
    lis.slice(i, i+3).wrapAll("<div class='new'></div>"); 
} 

Desafortunadamente esto va a agarrar niño li en el menú siguiente matriz para llenar la 'cuota' de 3 li en un div. Esto es, por supuesto, un desastre masivo de mis menús. Para ver un ejemplo, visite aquí.

¿Alguien tiene alguna sugerencia de cómo puedo arreglar esto?

Answer 1

su problema es el selector . Dado que sizzle funciona de derecha a izquierda, solo consultará todos los LI elements que tengan un UL element como padre directo (que generalmente siempre es el caso).

Por lo tanto, separe su ULs.

$('ul').each(function(){ 
    var $lis = $(this).children('li'); 
    for(var i = 0, len = $lis.length; i < len; i+=3){   
    $lis.slice(i, i+3).wrapAll("<div class='new'></div>"); 
    } 
}); 

Answer 2

¿Has intentado aplicarlo con el uso de la clase como selector ht de esta manera?

var lis = $("ul.list-content > li"); 
for(var i = 0; i < lis.length; i+=3) { 
    lis.slice(i, i+3).wrapAll("<div class='new'></div>"); 
} 

Pero si usted no lo sabía, se lo advierto de que está violando la dom .. usted está poniendo en ul div que no es bueno ..;)