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> 1}}标签已插入 - 似乎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已经很久了。我还没有测试过上面的代码。将其称为算法而不是代码。你必须做这样的事情。

Answer 2

我会从最后开始向后走，以便树木一起移动。

function nest_list(num) 
{
    if (num <= 1) { 
        return; 
    } else {
       var item_selector = ".level-" + num.toString();
       var parent_item_selector = ".level-" + (num - 1).toString();

       $(item_selector).each(function() {
           $parent_item = $(this).prev(parent_item_selector);

           if ($parent_item.length > 0) {
               // verify the ul
               var $ul = $parent_item.find('ul');
               if ($ul.length == 0) {
                  $ul = $('<ul></ul>').appendTo($parent_item);
               } 

               $ul.append($(this)); // moves the li
           }
       });

       nest_list(num - 1);
    }
);

nest_list(3); // number is the highest level that you want to nest from

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

2 个答案: