Селекторы jQuery

Question

Мне трудно найти примеры использования jQuery, так что я плохо задаю такой простой вопрос. У меня есть это ul:

<ul id="navLinks">
    <li class="selected" id="homeNavLink"></li>
    <li id="aboutNavLink"></li>
    <li id="contactNavLink"></li>
    ...
</ul>

Я хотел бы написать функцию, чтобы изменить, какой li имеет класс selected. Вот моя попытка:

function changeNavLink(selectedId) {
    $("#navLinks li").each(function() {
        $(this).removeClass("selected");
    });
    $("#" + selectedId).addClass("selected");
}

Что я делаю не так?

Answer 1

Вам не нужно делать .each - такие функции, как removeClass, могут отлично работать с набором элементов.

function changeNavLink(selectedId) {
    $("#navLinks li").removeClass('selected')
                     .filter('#' + selectedId)
                     .addClass('selected');
}

Должно работать. Он выбирает все элементы li, удаляет класс selected из всех них, отфильтровывает их до одного с переданным идентификатором и добавляет класс selected в тот.

Вот рабочая ссылка , показывающая код выше на работе.

Answer 2

Для конкретного приведенного примера HTML я бы предпочел:

function changeNavLink(selectedId) {
    $('#' + selectedId).addClass('selected')
                       .siblings('li')
                       .removeClass('selected');
}

Answer 3

$('#navlinks li.selected')

даст вам li с "выбранным" классом

Answer 4

Почему не работает с jQuery (это)? Это проще, чем вызывать функцию с параметрами. HTML:

<ul id="navLinks">
    <li class="selected" id="homeNavLink"></li>
    <li id="aboutNavLink"></li>
    <li id="contactNavLink"></li>
</ul>

JS:

$(document).ready(funciton(){
  $('#navLinkgs').on('click', 'li', function(){
    $this = $(this);
    $('#navLinkgs li.selected').removeClass('selected');
    $this.addClass('selected');
  });
});