.slice e .wrapall

Question

Sto usando un po 'di codice suggerito da un membro su stackoverflow e adattato da me per avvolgere ogni 3 voci di elenco come parte di un mega menu. Il codice è:

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

Purtroppo questo catturerà bambino Li dal menu principale accanto al riempire il 'quota' di 3 Li in un div. Ovviamente questo è un grosso problema per i miei menu. Per un esempio visita qui.

Qualcuno ha qualche suggerimento su come risolvere il problema?

Answer 1

Il tuo problema è il vostro selettore . Dal momento che sizzle funziona da destra a sinistra, verrà eseguita una query su tutti gli LI elements che hanno uno UL element come genitore diretto (che di solito è sempre il caso).

Quindi, separare il 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

hai provato ad applicarlo con l'uso della classe come selettore ht come questo?

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

Ma se non lo sapevate, ti avverto che si sta rompendo la dom .. si sta mettendo su div ul che non è buono ..;)