使用jquery在div中包装内容

Question

我试图在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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="disqus_thread"></div>

问题打开div位于正确的位置,但是关闭div不在正确的位置,它应该在上面div id="disqus_thread"但不在那里,我如何将它放在这个位置？

jQuery版本是1.12.4

提前致谢

Answer 1

使用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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="disqus_thread"></div>