ネストされたリスト

Question

のクラスにレベルの深さを追加私はこのようなリストを入れ子になっています

<ul> 
     <li>item 1</li> 
     <li>item 2 
      <ul> 
       <li>subitem 1</li> 
       <li>subitem 2</li> 
        <ul> 
         <li>sub-subitem1</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li>item 3 
      <ul> 
       <li>subitem 1</li> 
      </ul> 
     </li> 
    </ul> 

出力は、このようなものであるので、私は彼らの深さレベルに基づいにクラスを追加することができる方法はありますか？

$("ul").each(function(index, element){$(element).attr("class", "level-" + index);}); 

を...それだけでカウントULの彼らのインデックスに基づいて：

<ul class="level-0"> 
    <li>item 1</li> 
    <li>item 2 
     <ul class="level-1"> 
      <li>subitem 1</li> 
      <li>subitem 2</li> 
       <ul class="level-2"> 
        <li>sub-subitem1</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>item 3 
     <ul class="level-1"> 
      <li>subitem 1</li> 
     </ul> 
    </li> 
</ul> 

私はjQueryのに新しいですが、これを試してみました。どんな助けでも大歓迎です！

Answer 1

これを試してみてください：

$('ul').each(function() { 
    var depth = $(this).parents('ul').length; 
    $(this).addClass('level-' + depth); 
}); 

あなただけの3つのレベルを持っている場合は、この試すhttp://jsfiddle.net/alnitak/YSZFm/

Answer 2

を参照してください。これを試して、よりダイナミックな解決策については

$('ul').addClass('level-0'); 
$('ul').find('ul').removeClass('level-0').addClass('level-1'); 
$('ul').find('ul').find('ul').removeClass('level-0').removeClass('level-1').addClass('level-2'); 

http://jsfiddle.net/fallen888/2rATE/

を：

$("ul").each(function(index, element) { 
    var parents = $(this).parents('ul'); 
    var level = -1; 

    if (parents.length > 0) { 
     var parentClass = $(parents.get(0)).attr('class'); 
     level = parseInt(parentClass.substr(parentClass.indexOf('level-') + 6, 1)); 
    } 

    $(this).addClass('level-' + (level + 1)); 
}); 

http://jsfiddle.net/fallen888/2rATE/1/