JQuery removeClass on parent/sibling/child

Я использую следующий jQuery для изменения классов по элементам в неупорядоченном списке. Не похоже, что это самый эффективный способ достижения эффекта. Есть ли лучший способ написать это?

$(function() {
    $('nav li a').click( function() {
        $(this).parent().siblings().children().removeClass('active');
        $(this).addClass('active');
    });
});

Спасибо

Ответы

Ответ 1

В этих случаях обычно проще присоединить обработчик к <li> и нажать пузырь вверх из <a> (который по умолчанию). Тогда ваш обработчик выглядит следующим образом:

$(function() {
  $('nav li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

Тогда в вашем CSS вы просто учитываете active на <li>, например:

li.active a { color: red; }

В стороне, если у вас много элементов <li>, вы захотите использовать .delegate() следующим образом:

$('nav').delegate('li', 'click', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

Ответ 2

Также обратите внимание, что если вы хотите удалить 'active' из всех элементов, кроме this, то вы можете уйти с чем-то простым, как

$('.active').removeClass('active');
$(this).addClass('active');

И это должно распространяться через дерево довольно легко. Тем не менее, я вижу, что это вызывает головную боль при работе, если DOM сильно заселен.

Ответ 3

Я использовал выше код, он работает

Я использую в своем коде

enter code here : function addnewStepsUpper(){
jQuery('.hide_upper_clone_class').clone().insertAfter(".upper_clone_class1");
jQuery('.upper_clone_class1').siblings().removeClass('hide_upper_clone_class');

}

Спасибо Вишал Санвар