как проверить, был ли последний элемент

Question

как я могу проверить, был ли это последний div? Если бы это было мне нужно, чтобы удалить все классы "готовы"

HTML:

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

ЯШ:

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

Глядя на ваш код, я понимаю, вы хотите отображать один div после каждой секунды. Для этого я предложу следующий подход. Сначала добавьте hidden класс всем div s, а затем удалите его с первых hidden div в каждую секунду.

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

Насколько я понимаю вашу проблему, после решения должны работать в вашем случае:

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