jQuery Sélecteurs

Question

Je trouve difficile de trouver des exemples d'utilisation de jQuery, donc c'est vraiment dommage de poser une question aussi simple. Je ai ce ul:

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

Je voudrais écrire une fonction pour changer ce qui a la classe "sélectionnée". Voici ma tentative:

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

Qu'est-ce que je fais mal?

Answer 1

Vous ne devez pas faire .each - fonctions comme removeClass peuvent travailler sur un ensemble d'éléments très bien.

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

Devrait fonctionner. Ce qu'il fait est de sélectionner tous les éléments li, en supprimant la classe selected de chacun d'entre eux, filtering them out juste à celui avec l'ID passé, et en ajoutant la classe selected à celui-là.

Here is a working link montrant le code ci-dessus au travail.

Answer 2

$('#navlinks li.selected') 

vous donnera la li la « sélectionnée » class

Answer 3

Pour l'exemple spécifique HTML donné, je préférerais:

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

Answer 4

Pourquoi ne pas travailler avec jQuery (cela)? C'est plus facile, puis appelez la fonction avec 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'); 
    }); 
});