3

それぞれに事前に割り当てられたクラスに応じて、階層リストに分割する必要がある順序付けられていないリストがあります

  • . 具体的には、元のリストが次のような場合:

    <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>を取得できませんでした-jquery はなどを追加するようですが、ではありませんか？<ul> <li><p></ul></li>

    次に、 .wrap を使用して<ul></ul>必要な場所に新しいものを配置しようとしましたが、すべての子または孫を選択してグループ化してラップする方法を理解するほど賢くありませんでした。

    私がやろうとしていることについて何かヒントはありますか？

    • 4

    2 に答える 2

    3

    私が信じているのは、既存のリストの要素を操作するのは難しいということです。むしろ、新しいマークアップを生成して既存のマークアップを置き換える方が簡単です。

    私は次のようなものを思いつくことができます：

        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を使うのは久しぶりです。上記のコードはテストしていません。コードではなくアルゴリズムとして参照してください。あなたはこのようなことをしなければならないでしょう。

    于 2011-06-05T15:38:27.430 に答える
    0

    木が一緒に動くように、端から始めて後ろに戻ります。

    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
    于 2011-06-05T18:17:24.850 に答える