用<ul>包装<li>直到JQuery中的下一个标题

Question

如何将ul与h3一起包裹到下一个thisContent.find("li").each(function() { $(this).nextUntil("h3").andSelf(); }).wrap('<ul></ul>');？

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Title 1 </h3>
<li> List 1 </li>
<li> List 2 </li>
<li> List 3 </li>
<li> List 4 </li>
<h3> Title 2 </h3>
<li> List 1 </li>
<li> List 2 </li>
<li> List 3 </li>
<li> List 4 </li>

<h3> Title 1 </h3>
<ul>
  <li> List 1 </li>
  <li> List 2 </li>
  <li> List 3 </li>
  <li> List 4 </li>
</ul>
<h3> Title 2 </h3>
<ul>
  <li> List 1 </li>
  <li> List 2 </li>
  <li> List 3 </li>
  <li> List 4 </li>
</ul>

这就是我所期望的：

content-type

Answer 1

使用wrapAll()。

否则，您将单独包装每个项目。 您还需要从li开始，而不是h3，因为您希望在jQuery('h3').each(function(){ $(this).nextUntil('h3').wrapAll('<ul></ul>') }) 之间包装内容。

{{1}}

http://jsfiddle.net/qg8ywmy3/