Обернуть элементы внутри div, используя jQuery

У меня есть это:

<div>content element</div>
<div class="accordionTrigger">
  <div><h1>title</h1></div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  ...
</div>
<div>content element</div>
<div>content element</div>

Мне нужно обернуть все p-теги внутри div следующим образом:

    <div>content element</div>
    <div class="accordionTrigger">
      <div><h1>title</h1></div>
      <div class="moreInfo">    
        <p>text</p>
        <p>text</p>
        <p>text</p>
        ...
      </div>
    </div>
    <div>content element</div>
    <div>content element</div>

это можно сделать с помощью jQuery?

Если у меня больше одного <div class="accordionTrigger"></div>, вот так:

<div>content element</div>
<div class="accordionTrigger">
  <div><h1>title</h1></div>
  <p>text</p>
  <p>text</p>
  ...
</div>
<div>content element</div>
<div class="accordionTrigger">
  <div><h1>title</h1></div>
  <p>text</p>
  <p>text</p>
  ...
</div>

результат будет:

<div>content element</div>
<div class="accordionTrigger">
  <div><h1>title</h1></div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  ...
</div>
<div>content element</div>
<div class="accordionTrigger">
  <div><h1>title</h1></div>
</div>

Можно ли это избежать?

Ответы

Ответ 1

Проверьте метод . wrapAll():

$('.accordionTrigger p').wrapAll('<div class="moreInfo"></div>');

Метод wrapAll() будет обертывать все элементы, сопоставленные в другой элемент (по сравнению с методом .wrap(), который обертывает согласованные элементы отдельно)

DEMO

Ответ 2

Проверьте, что это будет работать в соответствии с ожиданием

<div>content element</div>
<div class="accordionTrigger">
  <div><h1>title</h1></div>


  <p>text</p>
  <p>text</p>
  <p>text</p>
  <script type="text/javascript"> 
      $("p").wrapAll("<div class='moreinfo'/>"); 
  </script>
</div>
<div>content element</div>
<div>content element</div>