Question

I am a total jQuery newbie (well web coding newbie come to that) and am excited about how much you can do so easily. I’m totally stuck on this though and would appreciate any help.

I have a ul with a list of colour swatches. I then filter these by showing and hiding. When hovering over one swatch I need to change the Class of the next sibling swatch that’s visible. This achieves it until I hide anything:

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

As does this

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

However once stuff is hidden these then change the class of the hidden elements, rather than the next visible one. I think the :visible selector is what I need but I’ve tried putting it everywhere and can’t get it to work. Some things I’ve tried:

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

So my question is probably “Where do I put the :Visible selector?” but maybe that’s the wrong approach to start with? Thanks for any pointers.

Answer 1

Without seeing your exact code, I can only suggest something like:

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

JS Fiddle demo.

Notice the selector passed to the index() method, which finds the index of the current element among the elements returned by the selector, in this case the li:visible.

References:

• index().
• eq().