jQuery - Atravesando elementos li ocultos

Question

Soy un novato total de jQuery (bueno, el novato en codificación web llega a eso) y estoy emocionado de lo mucho que puedes hacer tan fácilmente.Sin embargo, estoy totalmente estancado en esto y agradecería cualquier ayuda.

Tengo una ul con una lista de muestras de color.Luego los filtro mostrándolos y ocultándolos.Al pasar el cursor sobre una muestra, necesito cambiar la Clase de la siguiente muestra del hermano que está visible.Esto lo logra hasta que escondo algo:

$('+ li', this).toggleClass('swatchroll-sister');

Como hace esto

$(this).next().toggleClass('swatchroll-sister');

Sin embargo, una vez que las cosas están ocultas, estas cambian la clase de los elementos ocultos, en lugar del siguiente visible.Creo que el selector: visible es lo que necesito, pero he intentado ponerlo en todas partes y no puedo hacer que funcione.Algunas cosas que he probado:

$('+ li:visible', this).next().toggleClass('swatchroll-sister');
$(this).next('li:visible').toggleClass('swatchroll-sister');
$('+ li', this).toggleClass('swatchroll-sister');
$('+ li', this).('item:visible').toggleClass('swatchroll-sister');

Entonces, mi pregunta probablemente sea "¿Dónde coloco el: selector visible?"pero tal vez ese sea el enfoque equivocado para empezar?Gracias por cualquier sugerencia.

Answer 1

Sin ver su código exacto, solo puedo sugerir algo como:

$('li').click(
    function(){
        var i = $(this).index('li:visible');
        var nextVisible = $(this).closest('ul').find('li:visible').eq(i+1);
        $(nextVisible).addClass('classNameToAdd');
    });

Demostración de JS Fiddle .

Observe que el selector pasó al método index(), que encuentra el índice del elemento actual entre los elementos devueltos por el selector, en este caso el li:visible.

Referencias:

• index() .
• eq() .