Loop throught elements comparing previous values-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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

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

<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>