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>