Оберните элементы внутри div, используя jQuery - PullRequest
Новая
       1

Оберните элементы внутри div, используя jQuery

22 голосов
/ 15 февраля 2012

У меня есть это: 

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

Мне нужно обернуть все p-теги внутри div следующим образом: 

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

это можно сделать с помощью jQuery?

Если у меня более одного <div class="accordionTrigger"></div>, например: 

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

результат будет: 

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

можно мне этого избежать?

Ответы [ 2 ]

34 голосов
/ 15 февраля 2012

Проверьте метод .wrapAll () : 

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

Метод wrapAll () оборачивает все сопоставленные элементы в другой элемент (по сравнению с методом .wrap (), который упаковывает сопоставляемые элементы по отдельности)

DEMO

1 голос
/ 15 февраля 2012

Отметьте, что это сработает согласно ожиданиям 

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