Why the value of count not incrementing?

[sayedtaqui]

I was writing some jQuery to remove all the li elements except the first one. I know the other way of doing it however I couldn’t understand the problem in this situation.

http://jsbin.com/xoxa/5/edit

var ticker   = $('#ticker'),
    tickerLi = ticker.find('li'),   
    count = 0;


tickerLi.each(function(){   
  console.log(count);
  if(count === 0)
    return true;
  else
    $(this).remove();  
  count++;
});

why is the value of count not increasing ? If I remove

if(count === 0)
return true;
else
$(this).remove();

condition it does however with this condition it always returns 0.

** is there any logical reason for this?**

thanks.

[dyr]

The value of count is 0 the first time through the loop so the first conditional is true and the loop returns true. The only logic that has failed is yours! :P

You must do

var ticker   = $('#ticker'),
    tickerLi = ticker.find('li'),   
    count = 0;


tickerLi.each(function(){   
  console.log(count);
  if(count === tickerLi.length - 1)  // exit when count reached number of LI's - 1 (one LI is left)
    return;
  else
    $(this).remove();  
  count++;
});

Count starts at 0 and counts up to (the number of LI’s minus 1).

OR

var ticker   = $('#ticker'),
    tickerLi = ticker.find('li'),   
    count = tickerLi.length;


tickerLi.each(function(){   
  console.log(count);
  if(count === 1)  // exit when there's 1 LI left
    return true;
  else
    $(this).remove();  
  count--; // counting down from tickerLi.length to 1
});

Count starts at the number of LI’s and counts down to 1.

[__]

I was writing some jQuery to remove all the li elements except the first one.

Since you’re using jQuery anyway, you could simply do

$('#ticker li:not(:first)').remove();

[sayedtaqui]

@dyr Thanks a lot , but I m not able to understand what actually happened in my case. The loop is iterating five times however the count doesn’t increment. Can you please explain a little.

if(count === 0)
    return true;
  else
    $(this).remove(); 

why this logic is wrong and why the value of count is not increasing.

[dyr]

Because in your code you SET COUNT to 0 and then the FIRST thing you check in your loop is if COUNT IS 0, which it is. That’s the most fundamental logic at work right there. You must learn to think like a computer behaves.

You need to read my post more closely.

Your code, my comments:

var ticker   = $('#ticker'),
    tickerLi = ticker.find('li'),   
    count = 0;  // count is 0

tickerLi.each(function(){
      // count is still 0
  if(count === 0) // evaluates to true the first time through the loop
    return true; // gets executed
  else
    $(this).remove();  // never gets executed
  count++;
});

[sayedtaqui]

Ahh now I understand the only misconception I had, was this
‘return false’ == ‘break’
‘return true’ == ‘continue’
like ‘return false’ breaks and doesn’t let rest of the code get executed, ‘return true’ do the opposite, it lets the rest of code executed.
thanks for the clarification.

[__]

Ahh now I understand the only misconception I had

… like ‘return false’ breaks and doesn’t let rest of the code get executed, ‘return true’ do the opposite, it lets the rest of code executed.

Right; return always does exactly that: it returns from the function, and none of the code following is executed. Whether you return true or false or {some other value} has no impact on that.

the idea of break and continue apply to loops. While .each() does loop over each item in the jQuery object, your function isn’t actually inside that loop (it’s called from inside that loop).

[sayedtaqui]

@traq

Thanks, got it.

[__]

You’re welcome.

(Please note I edited my post above: I had misunderstood part of your comment.)

[Author]

Posts