jquery - 计算无序列表的深度

如何获得无序列表中最深的 li 标签的深度？

例如，这个无序列表最深 li 的深度等于 3 :

<ul>
  <li></li>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
  <li>
    <ul>
      <li>
        <ul>
          <li></li> <!-- I am the deepest -->
        </ul>
      </li>
    </ul>
  </li>
</ul>

最佳答案

假设您没有选择器(id、class 等)，您需要在没有 ul 的元素中使用一个简单的循环。

// create maxDepth and cDepth variables
var maxDepth = -1
  , cDepth   = -1
  ;

// each `li` that hasn't `ul` children
$("li:not(:has(ul))").each(function() {

    // get the current `li` depth
    cDepth = $(this).parents("ul").length;

    // it's greater than maxDepth found yet
    if (cDepth > maxDepth) {

       // this will become the max one
       maxDepth = cDepth;
    }
});

// alert
alert(maxDepth);

JSFIDDLE

如果你有最深的 .myClass 的 li 选择器:

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

很简单:只计算它的 ul parent

var depth = $(".myClass").parents("ul").length;

关于jquery - 计算无序列表的深度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22248432/