最後の要素であるかどうかを確認する方法

Question

最後のdivであるかどうかを確認するにはどうすればよいですか？

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

JS：それは私が

htmlの "準備" のすべてのクラスを削除する必要があるだった場合

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

私が理解しているコードを見ると、1秒ごとに1つのdivを表示したいと思っています。そのために私はアプローチに従うことを提案します。 最初にhiddenクラスをすべてdivに追加してから、最初にhidden divから1秒ごとに削除します。

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