jQuery選擇器

Question

我發現很難找到使用jQuery的例子，所以我不好意思問這樣一個簡單的問題。我有這個ul：

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

我想寫一個函數來改變哪個李有「選擇」類。這是我的嘗試：

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全部從filtering them out中刪除，並將selected添加到該元素中。

Here is a working link顯示上面的代碼在工作。

Answer 2

$('#navlinks li.selected') 

會給你立的「選擇」類

Answer 3

對於給定的具體HTML例子，我寧願：

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

Answer 4

爲什麼不使用jQuery（這）工作？它更容易，然後用params調用函數。 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'); 
    }); 
});