包装后如何添加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>")应该足够了。