如何用jQuery包装div标签中的各种元素？

Question

我有一个看起来像这样的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>

我已经尝试过使用jQuery的.wrap函数，但没有运气，因为标题标签下面可以有多个类型元素，我发现这个问题： jQuery包装div中的元素集非常相似但是不能适应它成为我需要的，任何人都可以帮助我吗？

提前致谢！

Answer 1

做这个：

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

Answer 2

你可以试试这个：

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

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

Answer 3

尝试这个

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()));
  }

});

Answer 4

我会在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);
    }
}

如何用jQuery包装div标签中的各种元素？

问题描述

4 个解决方案

解决方案1
8 2011-08-04 06:08:41

解决方案2
7 已采纳 2011-08-04 06:12:01

解决方案3
2 2011-08-04 06:01:15

解决方案4
1 2011-08-04 05:57:31

如何用jQuery包装div标签中的各种元素？

问题描述

4 个解决方案

解决方案1 8 2011-08-04 06:08:41

解决方案2 7 已采纳 2011-08-04 06:12:01

解决方案3 2 2011-08-04 06:01:15

解决方案4 1 2011-08-04 05:57:31

解决方案1
8 2011-08-04 06:08:41

解决方案2
7 已采纳 2011-08-04 06:12:01

解决方案3
2 2011-08-04 06:01:15

解决方案4
1 2011-08-04 05:57:31