如何使用 jQuery 将各种元素包装在 div 标签中？

发布于 2024-11-27 23:34:14 字数 922 浏览 0 评论 0原文

我有一个看起来像这样的 html 结构：

<h5>Title</h5>
<p> Content </p>
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>
<p> Content </p>

<h5>Title</h5>
<p> Content </p>
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>
<p> Content </p>

总之，它只是一些标题，其下面有内容，我只需要 div 中标题标签下面的所有内容，如下所示：

<h5>Title</h5>
<div>
    <p> Content </p>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <p> Content </p>
</div>

我尝试使用 .wrap jQuery 的功能，但没有运气，因为标题标签下面可以有多种类型元素，我发现了这个问题： jQuery 在 div 中包装元素集，非常相似，但尚未实现能够满足我的需要，有人可以帮助我吗？

提前致谢！

原文

I have an html structure that looks like this:

<h5>Title</h5>
<p> Content </p>
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>
<p> Content </p>

<h5>Title</h5>
<p> Content </p>
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>
<p> Content </p>

In summary it's just some headers with content below them, I just need everything below the header tags in a div like this:

<h5>Title</h5>
<div>
    <p> Content </p>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <p> Content </p>
</div>

I've tried using the .wrap function of jQuery but no luck since there can be multiple types elements below the header tags, I found this question: jQuery wrap sets of elements in div which is very similar but haven't been able to fit it into what I need, can anyone help me?

Thanks in advance!

分享到QQ

分享到微博

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

发布评论

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

Hello爱情风 2024-12-04 23:34:14

这样做：

$(document).ready(function () {
    $('h5').each(function () {
        $(this).nextUntil('h5').wrapAll('<div class="box"></div>');
    })
})

Do this:

$(document).ready(function () {
    $('h5').each(function () {
        $(this).nextUntil('h5').wrapAll('<div class="box"></div>');
    })
})

回复收藏 0 原文

逆光下的微笑 2024-12-04 23:34:14

您可以尝试以下操作：

http://jsfiddle.net/GGjXN/1/

$(function() {
    $('h5').each(function(i, e) {
        $(e).nextUntil('h5').wrapAll('<div>');
    });
});

You can try this:

http://jsfiddle.net/GGjXN/1/

$(function() {
    $('h5').each(function(i, e) {
        $(e).nextUntil('h5').wrapAll('<div>');
    });
});

回复收藏 0 原文

温柔一刀 2024-12-04 23:34:14

试试这个

var $div;
$("h5").each(function(){
  $div = $("<div />");

  if($(this).nextAll("h5").length){
   $(this).after($div.append($(this).nextUntil("h5")));
  }
  else{
    $(this).after($div.append($(this).siblings()));
  }

});

Try this

var $div;
$("h5").each(function(){
  $div = $("<div />");

  if($(this).nextAll("h5").length){
   $(this).after($div.append($(this).nextUntil("h5")));
  }
  else{
    $(this).after($div.append($(this).siblings()));
  }

});

回复收藏 0 原文

木槿暧夏七纪年 2024-12-04 23:34:14

我只是在页面中的 h5 之后粘贴一个 div，然后手动将元素插入其中。

假设所有内容都在某些内容内，例如 body 标签（未经测试！）：

<body>
    <h5>Title</h5>
    <p> Content </p>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <p> Content </p>
</body>

var children = $(document.body).children(),
    $child
    $div;

for(var x = 0, child; child = children[x++];) {
    $child = $(child);
    if($child.is('h5')) {
        $div = $('<div></div>').after($child);
    } else {
        $child.appendTo($div);
    }
}

I would just stick a div in the page after the h5, and manually insert the elements into it.

Assuming that everything is inside something, like the body tag (untested!):

<body>
    <h5>Title</h5>
    <p> Content </p>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <p> Content </p>
</body>

var children = $(document.body).children(),
    $child
    $div;

for(var x = 0, child; child = children[x++];) {
    $child = $(child);
    if($child.is('h5')) {
        $div = $('<div></div>').after($child);
    } else {
        $child.appendTo($div);
    }
}

回复收藏 0 原文

~没有更多了~