使用 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>

Answer 2

如果你有一个容器，你可以使用 jQuery wrapInner()方法，很容易：

$( "body" ).wrapInner( "<div class='wrapElement'></div>");

Answer 3

或者，您可以只使用内置的 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>

Answer 4

假设您的内容在 body 标签内：

       var mainhtml=  $('body').find('*').not('#thread_content').html()
       $('#thread_content').html(mainhtml);

Answer 5

试试这个..

<hr>
<h4>Title Here</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="disqus_thread"></div>

$(document).ready(function() {
$("body").wrapInner("<div class=wrapElement></div>");
});