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)
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.
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
Try it below.
#fatherDiv > div:nth-of-type(even) {
background-color: red;
}
#fatherDiv > div:nth-of-type(odd) {
background-color: green;
}<div id="fatherDiv">
<div id="childDiv1">
<h4>Div 1</h4>
</div>
<div id="childDiv2">
<h4>Div 2</h4>
</div>
<div id="childDiv3">
<h4>Div 3</h4>
</div>
<div id="childDiv4">
<h4>Div 4</h4>
</div>
<div id="childDiv5">
<h4>Div 5</h4>
</div>
<div id="childDiv6">
<h4>Div 6</h4>
</div>
<div id="childDiv7">
<h4>Div 7</h4>
</div>
</div>You could do this in CSS using odd/even in your child selector:
#fatherDiv.alternate :nth-child(even) {
background: red;
}<div id="fatherDiv" class="alternate">
<div id="childDiv1">
<h4>Div 1</h4>
</div>
<div id="childDiv2">
<h4>Div 2</h4>
</div>
<div id="childDiv3">
<h4>Div 3</h4>
</div>
<div id="childDiv4">
<h4>Div 4</h4>
</div>
<div id="childDiv5">
<h4>Div 5</h4>
</div>
<div id="childDiv6">
<h4>Div 6</h4>
</div>
<div id="childDiv7">
<h4>Div 7</h4>
</div>
</div>