jquery - 如何在 jQuery 中为类的每次出现选择类的最后一个元素

Question

我有一个包含 2 个子菜单的菜单。我想立即定位每个菜单中的最后一个 li a 元素，并且我希望它是动态的，因此如果添加另一个子菜单，它将找到并定位其最后一个 li a 元素。

我想在不添加比已经使用的更多的类或ID的情况下进行处理。我尝试只针对类 .sub-menu 但它只选择最后一个子菜单。有没有办法选择所有出现的情况？

<ul id="menu-main" class="menu">
 <li class="menu-item-has-children"><a href="#">About</a>
    <ul class="sub-menu">
        <li><a href="#">Our History</a></li>
        <li><a href="#">Strategic Plan</a></li>
        <li><a href="#">Board of Directors</a></li>
    </ul>
</li>
<li class="menu-item-has-children"><a href="#">Programs</a>
    <ul class="sub-menu">
        <li><a href="#">Monthly Calendars</a></li>
        <li><a href="#">Early Years</a></li>
        <li><a href="#">Children and Youth</a></li>
    </ul>
</li>
 </ul>

现在我正在努力

 $('li.menu-item-has-children:nth-child(1) li').last().focusout(function() {
    $(this).parent().parent().removeClass('hover');
    console.log("T removed");
});
$('li.menu-item-has-children:nth-child(2) li').last().focusout(function() {
    $(this).parent().parent().removeClass('hover');
    console.log("T2 removed");
});

我应该创建一个函数来为我执行此操作吗？我想一定有一种更简单的方法。

谢谢，非常感谢任何帮助。

Answer 1

使用事件委托(delegate)来处理新添加的子菜单，并简化您的选择器:

$(document).on('focusout', 'ul.sub-menu li:last-child a', function() {
    $(this).parent().parent().removeClass('hover');
    console.log("T removed");
});