javascript - 使用 jQuery 为嵌套列表元素添加计数类

Question

我有这个 HTML:

  <ul class="parent">
    <ul>
      <li>
        <ul></ul>
      </li>
      <li>
        <ul>
          <li>
            <ul></ul>
          </li>
        </ul>
      </li>
    </ul>
  </ul>

我需要为此标记中的所有嵌套列表添加计数类，以达到此目的:

  <ul class="parent">
    <ul class="level-1">
      <li>
        <ul class="level-2"></ul>
      </li>
      <li>
        <ul class="level-2">
          <li>
            <ul class="level-3"></ul>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="level-1">
      <li>
        <ul class="level-2"></ul>
      </li>
      <li>
        <ul class="level-2">
          <li>
            <ul class="level-3"></ul>
          </li>
        </ul>
      </li>
    </ul>
  </ul>

所以我这样做:

var parent_ul = $('.parent');

if (parent_ul.doesExist()){
    var parent_ul_lists = parent_ul.find('ul');

    parent_ul_lists.each(function(){
        var i;
        for (i = 0; i < parent_ul_lists.length; i++) {
            $(this).eq(i).addClass('level-' + i);
        }
    })
}

但在输出中，我对所有父级列表子级进行了类测试level-1。有人可以帮忙吗？

Answer 1

试试这个

$('.parent ul').addClass(function(){
   return "level-"+$(this).parents('ul').length;
});

DEMO