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));
});

FIDDLE

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)
});

应该这样做。

Working demo

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

2 个答案: