2

さまざまなレベルの深さのリストがあります。

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul class="sub-menu">
      <li>Sub item 1</li>
      <li>Sub item 2</li>
      <li>Sub item 3
        <ul class="sub-menu">
          <li>Subsub item 1</li>
          <li>Subsub item 2</li>
        </ul>
      </li>
      <li>Sub item 4</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

次のjqueryスクリプトを使用して、親にクラスを追加しています。

$("ul li ul").parent().addClass("menuparent");

このクラスを最上位の親にのみ追加し、li他のすべての（より深い）親に別のクラスを追加する方法はありliますか？

4

6 に答える 6

0

再帰的な解決策は次のとおりです。

function markNestedLists(par, level){
    par.addClass("level-" + level);

    par.children("li").children("ul").each(function(){
        markNestedLists($(this), level + 1);
    });     
}
markNestedLists($("ul").first(), 1);

http://jsfiddle.net/h9xvY/1/

最上位のULの親のIDがわかっている場合は、次のように使用できます。

markNestedLists($("#myParent > ul"), 1);
于 2012-09-25T16:17:39.737 に答える
0

最も近いチェックを実行して、liである親が存在するかどうかを確認できます。

if ($element.closest("li").length === 0) {
  $element.addClass("topLvl");
} else {
  $element.addClass("innerLvl");
}
于 2012-09-25T15:57:30.423 に答える
0

これを行う1つの方法があります。

$("ul li ul").parent().addClass("otherclass");
$("ul li >ul").parent().removeClass("otherclass").addClass("menuparent");
​

http://jsfiddle.net/MdBa5/

于 2012-09-25T16:06:33.243 に答える
0

試す：

$("ul:first>li").addClass("menuparent")
    .find('li>ul').parent().addClass('otherparent');

http://jsfiddle.net/3UcdM/

于 2012-09-25T16:10:44.500 に答える
0

クラスの名前に応じて、これを使用します。

$(function(){
    $('ul li').addClass(function(){
        return 'depth-' + $(this).parents('ul').length;            
    });        
});​

ここで実際の例を見ることができます：http：//jsfiddle.net/russelluresti/3peCS/

番号の追加ではなく、特別なクラス名が必要な場合は、switchステートメントを実行する必要があります。しかし、概念は同じです。内部の関数を使用してaddClass（を使用して）深さを決定しparents()、適切な値を返します。

于 2012-09-25T16:22:20.663 に答える
0

理想的には、最上位に固有のIDやその他の検索可能な属性などの絶対参照ulがありますが、これを回避することもできます。いずれにせよ、重要なのは子セレクター>です。暗黙の子孫セレクターではありません。ulそれはあなたがそのトップレベルの要素の下に正確に非常に多くのレベルである'を見つけたいだけであることを指定します。

基本ケースで、次を使用する場合：

$("ul li ul").parent()

任意の子孫（子、孫、曽孫...）である、任意の子孫であるすべてulの'を取得します。代わりに、次を使用します。 li ul

$("ul#topmost > li > ul").parent()

これにより、ツリーの最上部にある特定の子であるaのul子のみが取得されます。liul

ツリーの最上位にIDまたはその他の明示的なセレクターがない場合、最上位レベル自体が、またはその他のブロックレベル要素ulの子である必要があります。したがって、トップレベルの親を追加するだけで、必要な階層を明確かつ明確に取得できます。divbodyul

$("body > ul > li > ul").parent()

liまた、上記のセレクターでキャプチャされていない他の親も選択できるようにしたかったことを忘れました。:not次のように、セレクターまたはJQueryの.not()メソッドを使用してこれを行うことができます。

$("li>ul:not(body > ul > li > ul)").parent()

deeperParent2つの行を1つに結合するには、最初にそのようなすべてのにクラスを追加しli、次に最上位の親をフィルタリングして、menuParentそこにのみ割り当てます。

$("li>ul").parent().addClass('deeperParent').filter('body > ul > li').
     removeClass('deeperParent').addClass('menuParent')
于 2012-09-25T17:07:34.500 に答える