0

我们的 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()没有任何乐趣的功能。

4

2 回答 2

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

小提琴

于 2013-01-21T17:17:10.187 回答
0 
$('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)
});

应该这样做。

工作演示

于 2013-01-21T17:20:52.240 回答