JQuery/jCarousel: Mit WrapInner und n-ten Wähler nur jeder achte Artikel wickeln

Question

Ich möchte jCarousel verwenden UL Elemente anzuzeigen mit LI nur acht Bilder (zwei Reihen zu je vier) enthält, etwas, das wie folgt aussieht:
<li>
<div>
[image] [image] [image] [image]
[image] [image] [image] [image]
</div>
</li>
<li>
<div>
[image] [image] [image] [image]
[Bild] [Bild] [Bild] [Bild]
</div>
</li>

dachte ich, einen guten Weg, dies zu tun wäre after() zu verwenden, um einige Schließ- und Öffnungs Tags wie so hinzuzufügen:

$(".jcarousel-item img:nth-child(9)").after(</div></li><li><div>); 

Aber ich denke, ich missverstanden die Natur von after(), weil es nicht scheint, schließende Tags einfügen, es sei denn, sie führen mit öffnenden Tags.

Gibt es einen besseren Weg, dies mit wrapInner() zu tun?

Answer 1

Sie sind also mit einem einzigen ul mit einem einzigen li beginnend mit einem div eine ganze Reihe von Bildern enthalten & Sie es in eine Reihe von li s, die jeweils 8 Bilder rechts teilen möchten? Wenn ja, wird diese Arbeit:

var images = $("img"); 
while (images.length > 8) { 
    images.slice(8, 16).appendTo("ul").wrapAll("<li><div></div></li>"); 
    images = images.slice(16); 
} 

Grundsätzlich schneidet es 8 Bild Stücke aus der Sammlung von Bildern aus und fügt sie wieder in die ul in ihren eigenen li s (es bleibt die ursprüngliche li mit den ersten 8 Bilder) . Offensichtlich müssten Sie Ihre Selektoren anpassen, da Sie wahrscheinlich andere Bilder und ungeordnete Listen auf Ihrer Seite haben.

Bearbeiten: um den Grund zu erklären, warum .after nicht so funktioniert, wie Sie es erwartet haben - ich glaube, dass jQuery versucht, das DOM anstatt das rohe HTML zu manipulieren. Sie können also nicht einfach zufällige HTML-Abschnitte anhängen, es sei denn, sie können analysiert und in tatsächliche DOM-Knoten umgewandelt werden. Mit anderen Worten, der Inhalt, den Sie an .after übergeben, muss effektiv ein gültiges und vollständiges Stück HTML sein. Also, weil jQuery nicht herausfinden kann, wie man etwas wie "" in einen Knoten verwandelt, wirkt es ein bisschen merkwürdig (ich vermute, dass es in diesem Fall die beiden ersten geschlossenen Tags ignoriert, da sie keinen Sinn ergeben) ihre eigenen & dann erstellen die li & div Knoten & dann effektiv automatisch schließt sie für Sie).