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

发布于 2024-09-18 04:09:45 字数 1584 浏览 7 评论 0 原文

我想改变以下内容，

<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>

当我使用以下内容时，我可以使用

和

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

但我不确定如何使用 jquery 在标记之后添加此内容：

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

我尝试了此操作，但它不起作用：

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

原文

I want to change the following,

<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>

to like this.

<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>

When I use the following I can wrap images with <li> and <ul>.

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

But I am not sure how to add this after the </ul> tag with jquery:

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

I tried this, but it didn't work:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尾戒 2024-09-25 04:09:45

如果您的

元素是浮动的，您可以将其放入 CSS 中（而不是添加

）：

#cont_thumb { overflow: auto; }

因此，在计算自己的身高时，它会考虑到他们的身高。 Quirksmode.org 有一篇关于清除浮动的替代方法的非常好的文章。此外，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>');

If your <li> elements are floating, you can just put this in your CSS (instead of adding that <div>):

#cont_thumb { overflow: auto; }

So it'll factor in their height when figuring out its own. Quirksmode.org has a pretty good article on alternative approaches to clearing floats here. Also id="product_cont img" isn't valid, even in HTML5, you should use IDs that don't contain spaces to avoid side-effects and CSS selector pains.

Edited for comments: If you're zooming and need a full clear (and overflow: none also doesn't fit the bill), you can do this:

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

回复收藏 0 原文