需要用jquery将h3和div包装在包装器div中

Question

我有以下 HTML：

<div class="accordion">
  <h3>My title</h3>
  <div>My content</div>
  <h3>My title</h3>
  <div>My content</div>
  <h3>My title</h3>
  <div>My content</div>
</div>

我需要通过 jQuery 做的是将每个 h3 和 div 包装在另一个 div class="myDiv" 中，因此最终输出将如下所示：

<div class="accordion">
  <div class="myDiv">
    <h3>My title</h3>
    <div>My content</div>
  </div>
  <div class="myDiv">
    <h3>My title</h3>
    <div>My content</div>
  </div>
  <div class="myDiv">
    <h3>My title</h3>
    <div>My content</div>
  </div>
</div>

我将如何使用 jquery 做到这一点？

Answer 1

试试这个：

$("h3").each(function(){
   $(this).next("div").andSelf().wrapAll("<div class='myDiv'></div>");
});

http://jsfiddle.net/BSQpf/

Answer 2

像这样的东西应该可以做到：

$('.accordion h3').each(function() {
    $(this).nextUntil('h3').andSelf().wrapAll('<div class="myDiv"/>');
});

jsFiddle 示例

请参阅 API：

• nextUntil
• andSelf
• wrapAll