使用jQuery将元素包裹在div中 [英] Wrap elements inside a div using jQuery

问题描述

我有这个:

<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中，如下所示:

I need to wrap all the p-tags inside a div like this:

    <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完成吗?

can it be done with 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()方法分别包装匹配的元素相比)

The wrapAll() method will wrap all the elements matched into another element (compared to the .wrap() method which wraps the matched elements individually)

演示

DEMO

这篇关于使用jQuery将元素包裹在div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！