CODEWITHSUNDEEP
jquerycss
baaroz
baaroz

Reputation: 19587

find nth-child after .filter()

I trying to set css property just for the elements that display!=none

this works for the first child after using .filter()

$("#container > li").filter(':not(:hidden)').first().css("margin-right", "0");

but I want to set also for nth-child(3n+1) and this won't work because it count also the hidden elements when calculate the nth-child

 $("#container > li:nth-child(3n+1)").filter(':not(:hidden)').css("margin-right","0");

I also tried

$("#container > li").filter(':not(:hidden)').find(':nth-child(3n+1)').css("margin-right", "0");

any idea how to set css for every 4 child after filter those who not hidden?

is there a selector like .first() for nth-child()?

Upvotes: 0

Views: 1023

Answers (2)

raina77ow
raina77ow

Reputation: 106375

One possible approach (targeting each 4th element in the collection returned by first filter call):

$("#container > li")
   .filter(':visible')
   .filter(function(i) {
     return (i + 1) % 4 === 0; 
   })
   .css('margin-right', '0');

Upvotes: 2

adeneo
adeneo

Reputation: 318222

$("#container > li:visible").css("margin-right", function(i) {
    return i%3 ? null : 0;
});

FIDDLE

Upvotes: 1

Related Questions