web-dev-qa-db-ja.com

jQueryを使用して要素を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>

次のように、すべての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>

それを回避できますか？

jqueryhtmlword-wrap
24
stig

。wrapAll（） メソッドを確認します。

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

WrapAll（）メソッドは、一致したすべての要素を別の要素にラップします（一致した要素を個別にラップする.wrap（）メソッドと比較して）

[〜＃〜] demo [〜＃〜]

37
Didier Ghys

これをチェックすると、期待どおりに機能します

<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>
2
Sam T