2016-11-15 157 views
0

如何檢查它是否是最後一個div?如果是我需要刪除所有班 「準備就緒」如何檢查它是否是最後一個元素

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"); 
     } 
    } 
}) 

;

+0

使用'。是( ':最後一個' )' - 儘管當最後一個元素到達時你期望發生什麼?可能有辦法來改善你的邏輯。 –

+0

你能詳細解釋一下嗎? – Crowes

+0

**我需要刪除所有類「準備就緒」**你想要什麼完全由此? – Shaharyar

回答

2

看你的代碼我知道你想在每秒鐘後顯示一個div。爲此,我會提出以下方法。 首先向所有div s添加hidden類,然後在每秒鐘從第一個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>

1

據我理解您的問題,以下解決方案必須工作你的情況:

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

相關問題