使用jQuery将元素包裹在div中

2020/12/31 16:31 · jquery ·  · 0评论

我有这个:

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

我可以避免吗?

检查.wrapAll()方法:

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

wrapAll()方法会将所有匹配的元素包装到另一个元素中(与.wrap()方法分别包装匹配的元素)

演示

检查它会按预期工作

<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>
本文地址:http://jquery.askforanswer.com/shiyongjqueryjiangyuansubaoguozaidivzhong.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!