.slice und .wrapall

Question

Ich verwende ein wenig Code von einem Mitglied auf Stackoverflow vorgeschlagen und von mir angepasst, um alle 3 Listenelemente als Teil eines Mega-Menüs zu verpacken. Der Code ist:

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

Leider wird dieses Kind li vom nächsten übergeordneten Menü greifen die ‚Quote‘ von 3 li in einem div zu füllen. Das macht natürlich meine Menüs massiv durcheinander. Für ein Beispiel besuchen Sie bitte hier.

Hat jemand einen Vorschlag, wie ich das beheben könnte?

Answer 1

Ihr Problem ist Ihre Wähler . Da sizzle von rechts nach links funktioniert, werden alle LI elements abgefragt, die eine UL element als direkte Eltern haben (was normalerweise immer der Fall ist).

Also, trennen Sie Ihre 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

haben Sie versucht, es mit der Verwendung der Klasse als ht selector wie folgt anzuwenden?

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

Aber wenn Sie nicht wissen, ich warne Sie, dass Sie die dom brechen .. Sie setzen div auf ul, die nicht gut ist ..;)