how to check if it was the last element

Question

how can I check if it was the last div? If it was I need to remove all classes "ready"

html:

<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>

js:

$(function() {
    setInterval(showBlock, 1000);
    function showBlock() {
        var x = $("div:first").addClass("ready");
        var c = $("div");
        $(".ready").css("display", "block");
        if (c.hasClass("ready")) {
            $(".ready:last").next().addClass("ready");
        }
    }
})

;

Answer 1

Looking at your code what I understand is you want display one div after each second. For that I'll suggest following approach. First add hidden class to all div s and then remove it from first hidden div at each second.

 $(function() { $('div').addClass('hidden'); var i = setInterval(showBlock, 1000); function showBlock() { var x = $("div.hidden:first").removeClass("hidden"); if($("div.hidden").length == 0) { clearInterval(i); } } }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="green">Green</div> <div class="orange">Orange</div> <div class="red">Red</div> <div class="green">Green</div> <div class="orange">Orange</div> 

Answer 2

As far as I understand your problem, following solution must work in your case:

 $(function() { setInterval(showBlock, 1000); function showBlock() { var ready_divs = $("div.ready").length; var total_divs = $("div").length; if(ready_divs!=total_divs){ if(ready_divs==0){ $("div:first").addClass('ready'); }else{ $("div.ready:last").next('div').addClass('ready'); } }else{ $("div").removeClass('ready') } } }); 

 div{ width: 20px; height: 20px; border:1px solid red; } div.ready{ border:3px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="green"></div> <div class="orange"></div> <div class="red"></div> <div class="green"></div> <div class="orange"></div>