jquery nth child that is currently visible

Question

I can style every 4th 'item' div like so

  jQuery(".item:nth-child(4n)").addClass("fourth-item");

and that works fine, but then I hide some items, show some others and want to re-do this styling, but only styling every 4th item that is visible. So I have a function that will remove this styling and reapply it, but I need to specify in the reapplying of the style that it is only every 4th visible item, not every 4th item. I know the ":visible" selector but can't seen to chain it with the nth-child selector properly, any ideas?

I've tried various things like this to no avail...

jQuery(".item").removeClass("fourth-item");
jQuery(".item:visible:nth-child(4n)").addClass("fourth-item");

[How to get nth-child selector to skip hidden divs using CSS only](http://stackoverflow.com/a/32380418/3597276) — Michael Benjamin, Sep 09 '15 at 23:28

score 31 · Accepted Answer · edited Feb 23 '17 at 08:14

31

:nth-child scans the children of the parent no matter what their styling is. The counting in :nth-child is relative to the parent element, not the previous selector. This is explained in the jQuery docs for :nth-child:

With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class.

Using a more simple method with each does exactly what you want:

$('#test li:visible').each(function (i) {
    if (i % 4 == 0) $(this).addClass('fourth-item');
});

edited Feb 23 '17 at 08:14

marc_s

732,580
175
1,330
1,459

answered Feb 01 '10 at 09:48

Emil Ivanov

37,300
12
75
90

1

Well, it depends! Note that `nth-child` is `1` based, while here `i` is `0` based. – Emil Ivanov Feb 01 '10 at 10:42
2

Perfect answer. I did have to use @mbehan's suggestion of i + 1 for it to work as expected on every 4th element. – Ryan Burney Feb 09 '12 at 00:16

jquery nth child that is currently visible

1 Answers1

Linked

Related