在元素后添加div，并在内容后结束div

Question

我有一个h2、一个ul和一个段落。我想在h2后面添加一个div，但我想在这个div中添加ul和段落。现在看起来是这样的：

<h2>test</h2>
  <div id="test"></div>
<p>test</p>
<ul>
  <li>testlijst</li>
</ul>

它必须是这样的：

<h2>test</h2>
  <div id="test">
<p>test</p>
<ul>
  <li>testlijst</li>
</ul>
</div>

我用过：

$('h2').after('<div id="test"></div>');

div必须放在h2之后，并在内容之后或下一个h2的开头结束，因为内容可能不同。

Answer 1

您可以将.wrapaAll（）用于h2 的所有下一个同级

$('#faq h2').each(function() {
  $(this).nextUntil('h2').wrapAll('<div id="test"></div>');
})

#test {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="faq">
  <h2>test</h2>
  <p>test</p>
  <ul>
    <li>testlijst</li>
  </ul>
  <h2>test</h2>
  <p>test</p>
  <ul>
    <li>testlijst</li>
  </ul>
  <h2>test</h2>
  <p>test</p>
  <ul>
    <li>testlijst</li>
  </ul>
</div>
<h2>test2</h2>
<p>test</p>
<ul>
  <li>testlijst</li>
</ul>

Answer 2

试试这个：

var div = $('<div id="test"></div>');
div.append($('p')).append($('ul'));
$('h2').after(div);

Answer 3

您可以使用jquery wrapAll函数。

$("p").next().andSelf().wrapAll('<div id="test" />');

这是一把小提琴http://jsfiddle.net/uba87of5/

Answer 4

似乎是，您想要做的是：$('#test').append($('p,ul'))
jsfiddle此处

这将移动
<p>test</p> and <ul><li>testlijst</li></ul>
进入
<div id="test"></div>

Answer 5

div将放置在h2之后，并在内容之后或下一个h2 的开头结束

$('h2').nextUntil('h2').wrapAll('<div id="test"></div>');

http://jsfiddle.net/ew9hzfu2/2/