CODEWITHSUNDEEP
javascriptjquery
Marcel
Marcel

Reputation: 123

how to see multiple elements styling change with a loop?

for(i = 0; i <= 5; i++){
  $('div').css({'color': 'black'})
  $('#' + i).css({'color': 'red'})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>

If I'm using this I only see the last div change color, how can I make the loop so I can see every div change color, see 1 turn red, then 2, then 3 and so on until 5 ?

Upvotes: 0

Views: 74

Answers (3)

satish mallick
satish mallick

Reputation: 794

Your loop is happening almost instantly. Use setTimeout/setInterval to add some time to see changes: 

setInterval(function() {
  var $active = $('ul.cur-item li.active').removeClass('active').next('li');
  $active.removeClass('active');

  if (!$active.length) $active = $active.prevObject.siblings(':first');
  $active.addClass('active');
}, 2000);
ul.cur-item li.active {
    font-weight: 700;
    display: block;
    color: red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="cur-item">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Upvotes: 0

Justinas
Justinas

Reputation: 43479

Your loop is happening almost instantly. Use setTimeout/setInterval to add some time to see changes:

var i = 1;
var interval;

interval = setInterval(loop, 1000);

function loop() {
  $('div').css({'color': 'black'});
  $('#' + i).css({'color': 'red'});

  i++;
  
  if (i > 5) {
    clearInterval(interval);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>

Upvotes: 0

ponury-kostek
ponury-kostek

Reputation: 8060

You need setTimeout

for(let i = 0; i <= 5; i++){
  setTimeout(() => {
    $('div').css({'color': 'black'})
    $('#' + i).css({'color': 'red'})
  }, 250 * i);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>

Upvotes: 1

Related Questions