使用jquery将内容包装在div中
使用jquery将内容包装在div中
提问于 2016-11-16 06:43:02
我试图在div中包装内容，但问题是html页不可编辑，所以我尝试用jQuery将所有内容包装在div中，下面是html结构
$(document).ready(function() {
$("hr").before("<div class=wrapElement>");
$("#disqus_thread").before("</div>");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
问题打开div放在正确的位置上，但是关闭div不是在正确的位置上，它应该在div id="disqus_thread"之上但它不在那里，我如何使它放置在这个位置上？
jQuery版本为1.12.4
提前感谢
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-11-16 06:45:15
使用nextUntil()方法将所有元素提升到div，并使用wrapAll()方法使用div元素包装它们。
$(document).ready(function() {
$("hr").nextUntil("#disqus_thread") // get elements from hr upto the previous element of #disqus_thread
.wrapAll("<div class=wrapElement></div>"); // wrap all elements using div
});
$(document).ready(function() {
$("hr").nextUntil("#disqus_thread").wrapAll("<div class=wrapElement></div>");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
Stack Overflow用户
发布于 2016-11-16 06:50:06
如果您有一个容器，您可以使用jQuery wrapInner()方法，很容易：
$( "body" ).wrapInner( "<div class='wrapElement'></div>");Stack Overflow用户
发布于 2016-11-16 06:53:54
或者，您可以只使用内置的jQuery函数：
这里有一个小提琴：https://jsfiddle.net/uhr4kuk6/5/
$(document).ready(function() {
$('hr').remove();
$('h4').wrap('<div class="wrapElement">').prepend('<hr>');
$('p').each(function() {
var getContentWithTags = $(this).clone();
$('.wrapElement').append(getContentWithTags);
$(this).remove();
})
});.wrapElement {
background: red;
padding-top: .5em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="disqus_thread"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40625638
复制相关文章
相似问题
腾讯云开发者
