jQuery Selectors

Question

Me resulta difícil encontrar ejemplos de uso de jQuery, por lo que es malo para hacer una pregunta tan simple. Tengo este ul:

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

Me gustaría escribir una función para cambiar qué li tiene la clase "seleccionada". Aquí está mi intento:

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

¿Qué estoy haciendo mal?

Answer 1

Usted no tiene que hacer .each - funciones como removeClass pueden trabajar en un conjunto de elementos muy bien.

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

Debería funcionar. Lo que está haciendo es seleccionar todos los elementos li, eliminando la clase selected de todos ellos, a solo la que tiene el ID pasado, y agregando la clase selected a esa.

Here is a working link mostrando el código anterior en el trabajo.

Answer 2

$('#navlinks li.selected') 

le dará la li con la clase "seleccionado"

Answer 3

Para el ejemplo específico dado HTML, preferiría:

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

Answer 4

¿Por qué no funciona con jQuery (esto)? Es más fácil, luego llama a la función con 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'); 
    }); 
});