javascript - 如何从具有特定类的 HTML 树中找到最深的元素？

Question

我有一个菜单。当一棵树打开时，它会得到 class active。我不想用 class 获得菜单的最深子菜单active。

Answer 1

您可以使用该parents()集合来计算元素的深度，然后返回特定选择器的最低值。试试这个：

<div>
    1
    <div class="active">1.1</div>
    <div class="active">
        1.2
        <div class="active">
            1.2.1
            <div class="active">1.2.1.1</div>            
        </div>
        <div class="active">1.2.2</div>
    </div>
    <div class="active">1.3</div>
    <div class="active">
        1.4
        <div class="active">1.4.1</div>
        <div class="active">1.4.2</div>
    </div>
    <div class="active">1.5</div>
</div>

var $elems = $('.active'), $deepest, lowestLevel = 0;
$elems.each(function() {
    var depth = $(this).parents().length;
    if (depth > lowestLevel) {
        $deepest = $(this);
        lowestLevel = depth;
    }
});
$deepest.css('border', '1px solid #C00');

示例小提琴

Answer 2

还有一个香草版本：

function deepest (subMenu, select) { 
  return [].slice.call (subMenu.querySelectorAll (select)).reduce (
    function (deepest, el) {
      for (var d = 0, e = el; e !== subMenu; d++, e = e.parentNode);
      return d > deepest.d ? {d: d, el: el} : deepest;
    }, {d: 0, el: subMenu}).el;
 };

打电话给

deepest (subMenu, '.active');

其中第二个参数选择要考虑的元素。

在@Rory 的小提琴的修改版本上进行了测试