使用 jQuery 将元素包裹在 div 中

Posted 2023-02-19

【中文标题】使用 jQuery 将元素包裹在 div 中

【英文标题】：Wrap elements inside a div using jQuery

【发布时间】：2012-03-06 16:43:15

【问题描述】：

我有这个：

<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-tags 包装在一个 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>

我可以避免吗？

【参考方案1】：

检查.wrapAll()方法：

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

wrapAll() 方法会将所有匹配的元素包装到另一个元素中（相比之下 .wrap() 方法单独包装匹配的元素）

DEMO

【参考方案2】：

检查一下它会按预期工作

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