Question

如何在无序列表中获取最深 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>

Answer 1

假设你没有选择器（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的{{1}}选择器：

li

这很简单：只计算其<ul> <li></li> <li> <ul> <li></li> </ul> </li> <li> <ul> <li> <ul> <li class="myClass"></li> </ul> </li> </ul> </li> </ul>父母

ul

Answer 2

你可以使用

var parent = $('ul').children(),
child = parent;

while (child.length) {
parent = child;
child = child.children();
}

alert(parent.html());

DEMO

<强> HTML

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

计算无序列表的深度

2 个答案: