2012-02-15 13 views
21

tengo esto:jQuery, envuelva los elementos dentro de un div

<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 para envolver todos los p-etiquetas dentro de un div así:

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

+1

Sí! ¡Se puede hacer! * suspiro * ¿has intentado algo? –

Respuesta

32

Compruebe el .wrapAll() método:

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

El método wrapAll() envolverá todos los elementos coincidentes en otro elemento (en comparación con el método .Wrap() que envuelve los elementos coincidentes en forma individual)

DEMO

0

Marque esta va a trabajar a cabo de acuerdo con las expectativas

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