javascript - 我怎样才能 wrap() 一个容器中的所有元素而不是每个元素？

Question

我有类似于以下的 HTML:

<fieldset>
   <legend>Title</legend>

   <p>blahblahblah</p>
   <p>blahblahblah</p>
   <p>blahblahblah</p>
</fieldset>

我想做的是像这样将所有 P 包装到一个容器中:

<fieldset>
   <legend>Title</legend>

   <div class="container">
      <p>blahblahblah</p>
      <p>blahblahblah</p>
      <p>blahblahblah</p>
   </div>
</fieldset>

这是我当前的 Javascript:

$(document).ready(function()
{
   $('fieldset legend').click(function()
   {
      $(this).siblings().wrap('<div class="container"></div>');
   });
});

然而，这会导致每个 P 元素都被包装在它自己的 div.container 中。像这样:

<fieldset>
   <legend>Title</legend>

   <div class="container"><p>blahblahblah</p></div>
   <div class="container"><p>blahblahblah</p></div>
   <div class="container"><p>blahblahblah</p></div>
</fieldset>

有没有比使用类似的方法更简洁的方法来完成此操作:

$(document).ready(function()
{
   $('fieldset legend').click(function()
   {
      $(this).after('<div class="container"></div>');
      $(this).parent().append('</div>');
   });
});

Answer 1

您可以使用 wrapAll() 方法。

所以像这样。

$("fieldset").children("p").wrapAll('<div class="container"></div>');