jQuery 换行后如何添加 div 标签？

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>");

但我不确定如何在 jquery 的 </ul> 标记之后添加它：

<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 选择器的痛苦。

为 cmets 编辑：如果您正在缩放并需要完全清除（而 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>") 应该足够了。