2

次のようなマルチレベルのリストがあります。

<ul>
    <li>Item 1
        <ul>
            <li>Item 1's 1st Child
                <ul>
                    <li>Item 1's 1st Grandchild
                        <ul>
                            <li>Item 1's Grand Grandchild</li>
                        </ul>
                    </li>
                    <li>Item 1's 2nd Grandchild</li>
                    <li>Item 1's 3rd Grandchild</li>
                </ul>
            </li>
            <li>Item 1's 2nd Child</li>
            <li>Item 1's 3rd Child</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

liそれぞれの立場に応じてクラス「レベル」を持たせたい。結果は次のようになります。

<ul>
    <li class="level-1">Item 1
        <ul>
            <li class="level-2">Item 1's 1st Child
                <ul>
                    <li class="level-3">Item 1's 1st Grandchild
                        <ul>
                            <li class="level-4">Item 1's Grand Grandchild</li>
                        </ul>
                    </li>
                    <li class="level-3">Item 1's 2nd Grandchild</li>
                    <li class="level-3">Item 1's 3rd Grandchild</li>
                </ul>
            </li>
            <li class="level-2">Item 1's 2nd Child</li>
            <li class="level-2">Item 1's 3rd Child</li>
        </ul>
    </li>
    <li class="level-1">Item 2</li>
</ul>

jQueryでこれを達成する方法はありますか?

ご清聴ありがとうございました。

4

4 に答える 4

3

DOM トラバーサルのため、最速ではありませんが、次のように少しで実行できます。

​$("​​​li").each(function() {
   $(this).addClass("level-" + ($(this).parents("li").length+1)); 
});​​​

ここで実際の例を見ることができます

于 2010-04-27T19:29:02.400 に答える
2

これは一般的な解決策だと思います：

var current = $('ul:first');
var depth = 1;

while (current.length) {
  current = current.children('li').addClass('level-' + depth++).children('ul');
};
于 2010-04-27T19:28:47.917 に答える
2

リストが 4 レベルしかない場合

$("ul > li").addClass("level-1"); 
$("li.level-1 > ul > li").addClass("level-2"); 
$("li.level-2 > ul > li").addClass("level-3"); 
$("li.level-3 > ul > li").addClass("level-4");

おそらく、これを行うためのよりプログラム的な方法があり、任意の深さを可能にしますが、これは迅速でした.

于 2010-04-27T19:21:59.920 に答える
0

私がプレイします...あなたはいつでもそれを再帰的にすることができます:)

$(function() {
    addLevel($('ul:first'));
});

function addLevel($ul, level) {
    ( ! level ) ? level = 1 : level += 1;
    $ul.children('li').each(function() {
        $(this).addClass('level-' + level);
        $(this).children('ul').each(function() { addLevel($(this), level) });
    });
}
于 2010-04-27T19:56:39.857 に答える