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 wrap sets of elements in 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 个答案: