Question

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

我想这样做而不添加任何比已经使用的类或ID更多的类或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

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

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

Answer 2

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

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

});

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

2 个答案: