Loop throught elements comparing previous values

Question

I have a father div with X number of child divs. What I'm trying to do is to loop throught all the child elements and alternate some styles. For example (having 4 child divs)

Child 1 style = nothing;
Child 2 style = font-size: 24px;
Child 3 style = nothing;
Child 4 style = font-size: 24px;

At the moment this is what I have:

$('#fatherDiv > div').each(function() {
    if ($(this).css("background-color") !== 'red') {
        $(this).css("background-color", "red");
    }
});

With this code I'm able to loop throught all the childs but it seems that the if condition is wrong. I guess that I need to the the comparision but with the previous child instead of the current, so how can I do that? And is this #div > div.each the best way to loop throught the elements?

Here is a fiddle to play with.

user_9695286 · Answer

You can do this with simple CSS without javascript. Use selector nth-of-type(odd) & nth-of-type(even) (alternatively you can use nth-child(odd) & nth-child(even)) and assign your desired style.

References

https://www.w3schools.com/cssref/css_selectors.asp
https://www.w3.org/Style/Examples/007/evenodd.en.html

Try it below.

#fatherDiv > div:nth-of-type(even) {
  background-color: red;  
}

#fatherDiv > div:nth-of-type(odd) {
  background-color: green;  
}

user_10867454 · Answer

You could do this in CSS using odd/even in your child selector:

#fatherDiv.alternate :nth-child(even) {
  background: red;
}

Loop throught elements comparing previous values

2 Answers