如何将()所有元素包装在一个容器而不是每个元素中？

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>');