CODEWITHSUNDEEP
javascriptjquery
dmitriy
dmitriy

Reputation: 488

how to check if it was the last element

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

;

Upvotes: 0

Views: 97

Answers (2)

Snjv94
Snjv94

Reputation: 382

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>

Upvotes: 1

Vivek Athalye
Vivek Athalye

Reputation: 2979

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 divs 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>

Upvotes: 2

Related Questions