jQuery - Attraversamento di elementi li nascosti

Question

Sono un principiante di jQuery totale (beh, un principiante di codifica web ci arriva) e sono entusiasta di quanto tu possa fare così facilmente.Tuttavia, sono totalmente bloccato su questo e apprezzerei qualsiasi aiuto.

Ho un ul con un elenco di campioni di colore.Quindi li filtro mostrando e nascondendo.Quando si passa con il mouse su un campione, è necessario modificare la Classe del campione di fratello successivo visibile.Questo lo raggiunge finché non nascondo qualcosa:

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

Allo stesso modo

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

Tuttavia, una volta che le cose sono nascoste, queste cambiano la classe degli elementi nascosti, piuttosto che il successivo visibile.Penso che il selettore: visible sia ciò di cui ho bisogno, ma ho provato a metterlo ovunque e non riesco a farlo funzionare.Alcune cose che ho provato:

$('+ 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');

Quindi la mia domanda è probabilmente "Dove metto il selettore: Visible?"ma forse è l'approccio sbagliato con cui iniziare?Grazie per eventuali suggerimenti.

Answer 1

Senza vedere il tuo codice esatto, posso solo suggerire qualcosa del tipo:

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

Demo di JS Fiddle .

Notare il selettore passato al metodo index(), che trova l'indice dell'elemento corrente tra gli elementi restituiti dal selettore, in questo caso il li:visible.

Riferimenti:

• index() .
• eq() .