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

Answer 2

你也可以做这样的事情

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

祝你有个美好的一天!!

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

2 个答案: