jquery - jQuery 选择器

Question

我发现很难找到使用 jQuery 的例子，所以我问这么简单的问题很糟糕。我有这个 ul：

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

我想编写一个函数来更改哪个 li 具有“选定”类。这是我的尝试：

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，将它们过滤到仅传递 ID 的元素，然后将类添加到该元素selected中。

这是一个工作链接，显示了上面的代码。

Answer 2

$('#navlinks li.selected')

会给你“选定”类的 li

Answer 3

对于给出的特定 HTML 示例，我更喜欢：

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

Answer 4

为什么不使用 jQuery(this) ？它更容易，然后使用参数调用函数。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');
  });
});