Condition within a .each ()

Question

Condition within a .each ()

Navigation

#1 by (8 votes)
#2 by (4 votes)
#3 by (3 votes)

5

The problem is this, I have 9 li inside 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 browsing the list this 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 always add colors in Test 1, Test 4, Test 7, the condition would be i + 3 for red in the example, however I'm not understanding where to put that other for. Would it be within the index?

javascript jquery

asked by anonymous 29.01.2016 / 16:17

3 answers

4

$('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 case, it has 3 colors, '%' takes the rest of the division by the number of colors and compares with each one.

29.01.2016 / 16:21

3

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

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

Example: link

Using the nth-child it is possible to configure CSS for only to make effect of N on N elements.

If you want to do with jQuery you can do this:

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

jsFiddle: link

29.01.2016 / 16:59

How do I work with responsive design? Adapt JS code to IE8 and IE9

score 8 · Accepted Answer

You can use the division / remainder module:

$('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');
  }
})

Operation

The% computes the remainder 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 in the SOpt, and see it 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>

Optimizingthecode

Justtocomplement,seeasimplifiedwaytousethemodule:

$('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>