JQuery: 我可以在使用事件委托时对所有选择器应用操作吗？

Question

我有两个 UL，如下所示

<ul id="ul_one">
    <li>list item</li>
    <li>list item</li>
    <li class="active">list item</li>
</ul>
<ul id="ul_two">
    <li>list item</li>
    <li>list item</li>
    <li class="active">list item</li>
</ul>

我想做的是先从 <li> 中删除 <ul> 中的 'active' class，然后应用 'active' class 只是点击的项目。例如

$('#ul_one, #ul_two').on('click', 'li', function(e)
{
    var clicked = e.target;
    $('#ul_one, #ul_two').find('li.active').removeClass('active');
    $(clicked).addClass('active');
});

鉴于我正在使用委托，有没有一种方法可以从两个 <ul> 中删除 class 而无需再次按名称引用它们。所以与其说：

$('#ul_one, #ul_two').find('li.active').removeClass('active');

我可以这样说吗:

$('ALL items in the original selector').find('li').removeClass('active');

Answer 1

最好的办法是缓存 UL。

var uls = $('#ul_one, #ul_two');
uls.on('click', 'li', function() {
    uls.find('li.active').removeClass('active');
    $(this).addClass('active');
});

JQuery: 我可以在使用事件委托时对所有选择器应用操作吗？

JQuery: Can I apply action on all selectors when using event delegation?

jquery

delegation

selector