使用 jQuery 将元素包裹在 div 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9291723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrap elements inside a div using jQuery
提问by stig
I have this:
我有这个：
<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>
I need to wrap all the p-tags inside a div like this:
我需要像这样将所有 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>
can it be done with jQuery?
可以用jQuery完成吗？
If I have more than one <div class="accordionTrigger"></div>, like this:
如果我有多个<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>
the result will be:
结果将是：
<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>
can I avoid that?
我可以避免吗？
回答by Didier Ghys
Check the .wrapAll()method:
检查.wrapAll()方法：
$('.accordionTrigger p').wrapAll('<div class="moreInfo"></div>');
The wrapAll() method will wrap all the elements matched into another element (compared to the .wrap() method which wraps the matched elements individually)
wrapAll() 方法将所有匹配的元素包装到另一个元素中（与单独包装匹配元素的 .wrap() 方法相比）
回答by Sam T
Check this it will work out as per expectation
检查这个它会按预期工作
<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>
