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

【问题标题】：How to select a class's last element for each occurrence of the class in jQuery如何在jQuery中为每次出现的类选择一个类的最后一个元素
【发布时间】：2014-03-12 19:32:26
【问题描述】：

我有一个包含 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");
});

我应该为我创建一个函数吗？我在想一定有更简单的方法。

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

【问题讨论】：

你为什么在第一个 li 元素上使用 nth-child？
第一个仅针对第一个子菜单上的最后一个元素。第二个仅对第二个子菜单执行相同操作
试试$('.sub-menu li:last-child')
@lionel 仅针对最后一个子菜单的最后一个元素
@floor 实际上是针对子菜单内的最后一个 li 元素，如果你想针对 a 那么 $('.sub-menu li:last-child a')。这将针对两个子菜单。还是您要针对所有菜单的最后一个锚点？如在主菜单+子菜单中？对于动态添加的元素，下面的授权解决了这个问题

标签： jquery navigation

【解决方案1】：

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

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

【讨论】：

这确实针对每个元素。但是 removeClass 不起作用
我没有调查，因为它与问题无关。

【解决方案2】：

像这样使用，因为你应该使用delegation 来动态添加对象。

$(document).on("hover",".sub-menu li:last-child",function(){

});

【讨论】：