0

I keep some elements inside one container. For better visibility odd elements have other background color. Sometimes I need to filter elements with conditions, so unwanted elements I move to another class, but it seems nth-child keep old state. Even if I make it dynamic with jQuery still it keeping old state.

I would prefer keep used and unused elements in same container - if I separate them and change filters, need to sort visible elements again.

jsfiddle: http://jsfiddle.net/ex4740n2/5/

Have you any ideas how to solve it?
Thanks in advance!

Pete
  • 57,112
  • 28
  • 117
  • 166
  • 2
    Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. Please don't ignore the rules. But I'm guessing your problem is that you think `nth-child ` is a class selector - it's not, it's an element selector: http://stackoverflow.com/questions/5428676/nth-child-doesnt-respond-to-class – Pete Dec 04 '15 at 16:10
  • The elements are only hidden. They still exist, so they are still considered part of the even/odd indexes. – nderscore Dec 04 '15 at 16:14
  • I put the code, check jsfiddle link. @Pete But yes, I was thinking it's a class selector. –  Dec 04 '15 at 16:16
  • 1
    @Synchro. The main bit of the above statement is **in the question itself** - Links to jsfiddle.net must be accompanied by code. – Pete Dec 04 '15 at 16:24

1 Answers1

0

The answer by @Pete: 

But I'm guessing your problem is that you think nth-child is a class selector - it's not, it's an element selector

So, if it not possible to make it by only css, make it using JS. Iterate visible elements and change background color. 

var visibled = $(".item");

for (var i = 0; i < visibled.length; i += 2) {
  $(visibled[i]).css("background-color", "rgba(190, 255, 196, 1)");
  $(visibled[i + 1]).css("background-color", "");
}