jQuery: могу ли я применить действие ко всем селекторам при использовании делегирования событий?

#jquery #selector #delegation

#jquery #селектор #делегирование

Вопрос:

У меня есть два 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>

Что я хотел бы сделать, это сначала удалить класс ‘active’ из <li> ‘s в ОБОИХ <ul> ‘s, а затем применить класс ‘active’ только к выбранному элементу. Например

 $('#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> , не ссылаясь на них снова по имени. Поэтому вместо того, чтобы сказать:

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

могу ли я сказать что-то вроде:

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

1. li.active В вашем случае простого таргетинга будет недостаточно? Например: jsfiddle.net/avs19ajk

2. Нет, это был упрощенный пример. На самом деле, будет несколько других ul с активными li, которые я не хочу, чтобы эта функция касалась

Ответ №1:

Лучше всего кэшировать ULS.

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