jquery - 使用Jquery将单个UL LI列表转换为基于类的层次嵌套列表

Question

我有一个无序列表，需要将其拆分为分层列表，具体取决于已预先分配给每个

的类。具体来说，如果原始列表是这样的:

<ul>
  <li class="level-1"><a href="#">First Level Item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-1"><a href="#">Next First Level Item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
</ul>

我需要它成为一个基于每个 li 的类的嵌套列表，因此最终列表被重新渲染为:

<ul>
  <li class="level-1"><a href="#">First Level Item</a>
    <ul>
      <li class="level-2"><a href="#">Second Level item</a>
        <ul>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
        </ul>
      </li>
      <li class="level-2"><a href="#">Second Level item</a>
        <ul>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
        </ul>
      </li>
      <li class="level-2"><a href="#">Second Level item</a></li>
      <li class="level-2"><a href="#">Second Level item</a></li>
    </ul>
  </li>
  <li class="level-1"><a href="#">Next First Level Item</a>
    <ul>
      <li class="level-2"><a href="#">Second Level item</a></li>
      <li class="level-2"><a href="#">Second Level item</a>
        <ul>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
        </ul>
      </li>
    </ul>
</ul>

因为我无法在输出此列表的 CMS 上运行服务器端代码，所以我必须在客户端重新组织此 HTML 列表。

我花了很多时间尝试编写自己的 jQuery 来创建新的层次结构，但没有运气。我的第一次尝试是尝试使用 jQuery .before 添加额外的 </ul></li>类之前的标签，然后附加一个新的 <ul>标签之后，但我无法获得任何 <ul> <li>插入标签——似乎jquery会添加一个<p>等等，但不是 </ul></li> ？

然后我尝试使用 .wrap 来放置新的 <ul></ul>在需要的地方，但我还不够聪明，无法弄清楚如何选择和分组所有的子或孙子来包装。

有人对我应该尝试做什么有任何提示吗？

Answer 1

我认为操纵现有列表的元素会很困难。相反，生成新标记并用它替换现有标记会更容易。

我可以想出这样的东西:

    var prevlevel = 1;    
    var currentlevel;
    var newlisthtml = "";

    $("#idoful li").each(function(){
        currentlevel = parseInt($(this).attr("class").split("-")[1]);

        if(currentlevel > prevlevel) {
            newlisthtml += "<ul>";
        } else if(currentlevel < prevlevel) {
            newlisthtml += "</ul></li>";
        } else if(currentlevel == prevlevel) {
                    newlisthtml += "</li>";
            }

        newlisthtml += '<li class="level-' + currentlevel + '">' + $(this).html();
        prevlevel = currentlevel; 
    });

    $("#idoful").html(newlisthtml);

我使用 jQuery 已经很长时间了。我没有测试过上面的代码。将其称为算法而不是代码。你必须做这样的事情。