CODEWITHSUNDEEP
jqueryhtmlword-wrap
stig
stig

Reputation: 445

Wrap elements inside a div using jQuery

I have this:

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

I need to wrap all the p-tags inside a div like this:

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

can it be done with jQuery?

If I have more than one <div class="accordionTrigger"></div>, like this:

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

the result will be:

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

can I avoid that?

Upvotes: 39

Views: 42098

Answers (2)

Sam Arul Raj T
Sam Arul Raj T

Reputation: 1770

Check this it will work out as per expectation

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

Upvotes: 2

Didier Ghys
Didier Ghys

Reputation: 30666

Check the .wrapAll() method:

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

The wrapAll() method will wrap all the elements matched into another element (compared to the .wrap() method which wraps the matched elements individually)

DEMO

Upvotes: 56

Related Questions