logo标签列表

如何使用jQuery将不同元素包装在一个div标签中？

javascriptjqueryhtmlwrapperaccordion
6

我有一个类似这样的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，它非常相似，但我还没有能够将其适用于我的情况。请问有人可以帮我吗？
提前感谢！
4个回答
8

请执行以下操作：

$(document).ready(function () {
    $('h5').each(function () {
        $(this).nextUntil('h5').wrapAll('<div class="box"></div>');
    })
})
7
你可以尝试这个：

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

$(function() {
    $('h5').each(function(i, e) {
        $(e).nextUntil('h5').wrapAll('<div>');
    });
});
1
从来不知道nextUntil函数，太棒了。 - Andy Ray
如果你想包含标题，可以添加“.andSelf()”，所以第3行变成“$(e).nextUntil('h5').andSelf().wrapAll('<div>');”。- 谢谢，这正是我需要的。 - Jason
2

试试这个

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

});
1

我会在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);
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接