包裝後如何添加div標籤使用jQuery

Question

（更新）

我想改變以下，

<div id="system"> 
    <div id="product_cont img"> 
     <img src="image1.jpg" /> 
     <img src="image2.jpg" /> 
     <img src="image3.jpg" /> 
.. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.  
Pellentesque in lacus et augue malesuad. 
    </div> 
</div> 

喜歡這個。

<div id="system"> 
    <div id="product_cont img"> 
     <ul class="cont_thumb"> 
     <li><img src="image1.jpg" /></li> 
     <li><img src="image2.jpg" /></li> 
     <li><img src="image3.jpg" /></li> 
     ... 
     </ul> 
     <div style="clear:both;"></div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.  
Pellentesque in lacus et augue malesuad 
    </div> 
</div> 

當我使用我可以<li>和<ul>包裹的圖像以下。

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>"); 

但我不知道如何將</ul>標籤使用jQuery後補充一點：

<div style="clear:both;"></div> 

我想這一點，但沒有奏效：

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>").after('<div style="clear:both;"></div>'); 

任何人都可以請幫幫我？ 在此先感謝。

Answer 1

如果您<li>元素是浮動的，你可以把這個在你的CSS（而不是並稱<div>）：

#cont_thumb { overflow: auto; } 

所以它會找出自己的時候在他們的身高因素。 Quirksmode.org有a pretty good article on alternative approaches to clearing floats here。另外id="product_cont img"即使在HTML5中也是無效的，您應該使用不包含空格的ID來避免副作用和CSS選擇器痛苦。

編輯的評論：如果你縮放和需要一個完整清晰的（和overflow: none也不符合該法案），你可以這樣做：

$("#system #product_cont img").wrapAll('<ul class="cont_thumb">').wrap('<li />') 
         .closest('ul').after('<div style="clear:both;"></div>'); 

Answer 2

$("#system #product_cont img").append('<div style="clear:both;'></div>")應該足夠了。