Question

我有一个h2和一个段落。我想在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

您可以对h2

的所有下一个兄弟使用.wrapAll（）

$('#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

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

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

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

Answer 5

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

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

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

5 个答案: