name - jquery, envolver elementos dentro de un div

jquery name attribute

Question

Tengo esto:

<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>

Necesito envolver todas las etiquetas p dentro de una división como esta:

    <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>

¿Se puede hacer con jQuery?

Si tengo más de un <div class="accordionTrigger"></div> , así:

<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>

El resultado será:

<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>

puedo evitar eso?

Answer 1

Compruebe el método .wrapAll() :

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

El método wrapAll () envolverá todos los elementos emparejados en otro elemento (comparado con el método .wrap () que envuelve los elementos emparejados individualmente)

DEMO

Answer 2

Compruebe esto funcionará según lo esperado

<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>