2010-11-17 54 views
1

我需要在包裝div/span中獲取一些列表元素。這是它的現在:用jQuery包裝東西

<ul> 
<li>One</li> 
<li>Two</li> 
<li>Three</li> 
<li>Four</li> 
<li>Five</li> 
<li>Six</li> 
</ul> 

我需要的是這樣的:

<ul> 
<div class="wrapper"> 
<li>One</li> 
<li>Two</li> 
</div><div class="wrapper"> 
<li>Three</li> 
<li>Four</li> 
</div><div class="wrapper"> 
<li>Five</li> 
<li>Six</li> 
<div class="wrapper"> 
</ul> 

或者可以像財產以後跨度。沒有關係。我需要在每三個元素之後換行。

+4

這不是有效的HTML - 「li」列表項是'ul'無序列表可以包含的唯一東西。如果您需要多欄列表,您是否考慮過使用浮動或CSS3列? – 2010-11-17 06:10:53

+0

您所期望的輸出不是有效的HTML。不建議在您的網頁中使用此類HTML – 2010-11-17 06:12:48

回答

0

這不是有效的HTML,這是錯誤的做到這一點 - 你不能插入內部列表格,但我會給以供將來參考捆綁的語法jQuery中:

$("JQUERYSELECTOR").wrap("<div class='wrapper'></div>"); 

的JQUERYSELECTOR應該是什麼元素,你想換行即

#ul:nth-child(1) 

爲列表的第一個孩子。

但是,再次,包裝div列表項是錯誤的。

2

可以遍歷您的元素,並使用.slice().wrapAll(),這樣包起來:

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

既然你說了些什麼一個<div>/<span>這將做的工作,並給你有效的HTML ,像這樣:

<ul> 
    <li class="wrapper"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
    </li> 
    <li class="wrapper"> 
    <ul> 
     <li>Four</li> 
     <li>Five</li> 
     <li>Six</li> 
    </ul> 
    </li> 
</ul> 

你舉的例子表明,每2元,但你的問題文中說,每3 ...我只是挑3在這裏,只是adjus t函數中的數字,並且您已全部設置。