JQuery的/的jCarousel：使用WrapInner和第n個選擇只包裹每8個項目

Question

我想使用的jCarousel來顯示與僅包含八個圖像（四兩行）李UL元素，這東西看起來像這樣：
<li>
<div>
[圖像] [圖像] [圖像] [圖像]
[圖像] [圖像] [圖像] [圖像]
</div>
</li>
<li>
<div>
[圖像] [圖像] [圖像] [圖像]
[圖片] [圖片] [圖片] [圖片]
</div>
</li>

我想到了一個好辦法做到這一點是使用after()添加一些關閉和開啓標籤，像這樣：

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

但我想我誤解了after()的性質，因爲它似乎不會插入結束標記，除非它們帶有開始標記。

有沒有更好的方法來做到這一點wrapInner()？

Answer 1

所以你開始與一個單一的ul與單個li包含一大堆&要將其分割成一組li的靜像的div，每個包含8個圖像嗎？如果是這樣，這將工作：

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

基本上它從圖像的集合切片關8個的圖像塊，並將其附加回自己li S（離開原來li，由第1 8個圖像）ul 。很明顯，你需要調整你的選擇器，因爲你的網頁上有其他圖像和無序列表。

編輯：解釋爲什麼.after不工作你期待它的方式 - 我相信jQuery的試圖操縱DOM，而不是原始的HTML。因此，除非可以將它們解析並轉換爲實際的DOM節點，否則不能隨意添加HTML塊。換句話說，您傳遞給.after的內容有效地需要成爲一個有效且完整的HTML本身。所以，因爲jQuery不能解決如何將「</div></li><li><div>」這樣的東西變成一個節點，它有點奇怪（我猜在這種情況下，它忽略了兩個最初的關閉標籤，因爲它們沒有意義他們自己&然後創建的li & div節點&然後有效地爲你自動關閉它們）。