jQuery, envelopper des éléments dans une div

j'ai ceci:

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

j'ai besoin d'envelopper tous les p-des balises à l'intérieur d'un div comme ceci:

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

peut-on le faire avec jQuery?

Si j'ai plus d'un <div class="accordionTrigger"></div>, comme ceci:

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

le résultat sera:

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

puis-je éviter cela?

22
demandé sur Bill the Lizard 2012-02-15 14:34:09

2 réponses

Case .wrapAll () méthode:

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

la méthode wrapAll () enroule tous les éléments appariés dans un autre élément (par rapport à la .méthode wrap () qui enveloppe les éléments appariés individuellement)

DEMO

34
répondu Didier Ghys 2012-02-15 10:36:31

Vérifier ce que ça marchera aussi par l'attente

<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>
0
répondu Sam T 2012-02-15 10:58:32