Condition within a . each()

Question

The problem is, I’m 9 li within a ul

<ul>
  <li>Teste1</li>
  <li>Teste2</li>
  <li>Teste3</li>
  <li>Teste4</li>
  <li>Teste5</li>
  <li>Teste6</li>
  <li>Teste7</li>
  <li>Teste8</li>
  <li>Teste9</li>
</ul>

And I’m going through the list that way:

$('li').each(function(index,value){
    if(index==0){
        $(this).css('color','red');
    } else if (index==1){
        $(this).css('color','blue');
    } else if (index==2){
        $(this).css('color','green');
    }
})

So far so good, but I wanted to add the colors always in Test 1, Test 4, Test 7, the condition would be i+3 for the red in the example, but I’m not understanding where to put this other one. Would be inside the index?

Answer 1

You can use the module/split rest:

$('li').each(function(index,value){
  if((index%3)==0){
    $(this).css('color','red');
  } else if ((index%3)==1){
    $(this).css('color','blue');
  } else if ((index%3)==2){
    $(this).css('color','green');
  }
})

Functioning

The % calculates the rest of the entire division, see applied to indexes:

0 / 3 = 0, resto 0
1 / 3 = 0, resto 1
2 / 3 = 0, resto 2
3 / 3 = 1, resto 0
4 / 3 = 1, resto 1
5 / 3 = 1, resto 2
6 / 3 = 2, resto 0
7 / 3 = 2, resto 1

and so on.

Demonstration

Run the code below right here on Sopt, and see working:

$('li').each(function(index,value){
  if((index%3)==0){
    $(this).css('color','red');
  } else if ((index%3)==1){
    $(this).css('color','blue');
  } else if ((index%3)==2){
    $(this).css('color','green');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>Teste1</li>
  <li>Teste2</li>
  <li>Teste3</li>
  <li>Teste4</li>
  <li>Teste5</li>
  <li>Teste6</li>
  <li>Teste7</li>
  <li>Teste8</li>
  <li>Teste9</li>
</ul>

Optimizing the code

Just to complement, see a simplified way to use the module:

$('li').each(function(index,value){
  $(this).css('color',['red','green','blue'][index%3]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul><li>Teste1</li><li>Teste2</li><li>Teste3</li><li>Teste4</li><li>Teste5</li><li>Teste6</li><li>Teste7</li><li>Teste8</li><li>Teste9</li></ul>

Answer 2

$('li').each(function(index,value){
  if(index%3==0){
    $(this).css('color','red');
  } else if (index%3==1){
    $(this).css('color','blue');
  } else if (index%3==2){
    $(this).css('color','green');
  }
})

Would that be?

In this case, it has 3 colors, the '%' takes the rest of the division by the number of colors and compares with each one.

Answer 3

The best thing would be to do this only with CSS...

li:nth-child(3n + 1){
    color: red;
}
li:nth-child(3n + 2){
    color: blue;
}
li:nth-child(3n){
    color: green;
}

Example: https://jsfiddle.net/cjnk3xu8/

Using the Nth-Child it is possible to configure the CSS to only effect N in N elements.

---

If you want to do jQuery you can do it like this:

var cores = ['red', 'blue', 'green'];
$('li').each(function(index, value) {
    $(this).css('color', cores[index % 3]);
});

jsFiddle: https://jsfiddle.net/cjnk3xu8/1/