jquery,包装元素在div内

前端之家收集整理的这篇文章主要介绍了jquery,包装元素在div内前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个:
  1. <div>content element</div>
  2. <div class="accordionTrigger">
  3. <div><h1>title</h1></div>
  4. <p>text</p>
  5. <p>text</p>
  6. <p>text</p>
  7. ...
  8. </div>
  9. <div>content element</div>
  10. <div>content element</div>

我需要将所有p标签包装在一个div中,如下所示:

  1. <div>content element</div>
  2. <div class="accordionTrigger">
  3. <div><h1>title</h1></div>
  4. <div class="moreInfo">
  5. <p>text</p>
  6. <p>text</p>
  7. <p>text</p>
  8. ...
  9. </div>
  10. </div>
  11. <div>content element</div>
  12. <div>content element</div>

可以用jQuery来完成吗?

如果我有不止一个< div class =“accordionTrigger”>< / div>,像这样:

  1. <div>content element</div>
  2. <div class="accordionTrigger">
  3. <div><h1>title</h1></div>
  4. <p>text</p>
  5. <p>text</p>
  6. ...
  7. </div>
  8. <div>content element</div>
  9. <div class="accordionTrigger">
  10. <div><h1>title</h1></div>
  11. <p>text</p>
  12. <p>text</p>
  13. ...
  14. </div>

结果将是:

  1. <div>content element</div>
  2. <div class="accordionTrigger">
  3. <div><h1>title</h1></div>
  4. <p>text</p>
  5. <p>text</p>
  6. <p>text</p>
  7. <p>text</p>
  8. ...
  9. </div>
  10. <div>content element</div>
  11. <div class="accordionTrigger">
  12. <div><h1>title</h1></div>
  13. </div>

我可以避免吗?

解决方法

检查 .wrapAll()方法
  1. $('.accordionTrigger p').wrapAll('<div class="moreInfo"></div>');

wrapAll()方法将所有匹配的元素包装到另一个元素中(与.wrap()方法相比较,该方法单独包装匹配的元素)

DEMO

猜你在找的jQuery相关文章