jquery - 使用 Jquery 移动列表项以创建嵌套列表

Question

我们的 CMS 以以下格式输出一些列表项：

<ul class="tocList">
  <li><a href="#s6855">a list item</a></li>

  <li class="indent"><a href="#s4671">a list item</a></li>

  <li class="indent"><a href="#s6824">a list item</a></li>

  <li><a href="#s6856">a list item</a></li>

  <li class="indent"><a href="#s4672">a list item</a></li>

  <li class="indent"><a href="#s4673">a list item</a></li>

  <li class="indent"><a href="#s4674">a list item</a></li>
</ul>

我需要更改结构以包含正确结构化的嵌套列表：

<ul class="tocList">
  <li><a href="#s6855">a list item</a>
    <ul>
      <li class="indent"><a href="#s4671">a list item</a></li>

      <li class="indent"><a href="#s6824">a list item</a></li>
    </ul>
  </li>
  <li><a href="#s6856">a list item</a>
    <ul>
      <li class="indent"><a href="#s4672">a list item</a></li>

      <li class="indent"><a href="#s4673">a list item</a></li>

      <li class="indent"><a href="#s4674">a list item</a></li>
    </ul>
  </li>
</ul>

更改 CMS 逻辑会太痛苦，也会导致我们的编辑工作量太大。我想用 JQuery 来实现这一点。我一直在尝试各种 JQuery .wrap()，.each()没有任何乐趣的功能。

Answer 1

$(".tocList li:not(.indent)").each(function() {
    $(this).nextUntil("li:not(.indent)").wrapAll("<ul/>");
    $(this).next("ul").detach().appendTo($(this));
});

小提琴

Answer 2

$('ul.tocList > li > a').each(function(i,v){
    var li = $(v).parent();
    li.nextUntil('li:not(.indent)').wrapAll('<ul></ul>');
    li.next('ul').detach().appendTo(li)
});

应该这样做。

工作演示