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

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

Answer 2

如果您的<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>');

如何使用jQuery包装后添加div标签？

2 个答案: