jquery $.each遍历实现延时，jquery each遍历html元素延迟

需要：点击“检测”，下列数字依次由红变绿，为了假装真的检测了某些东西，在循环的时候，加上延迟，显得效果比较逼真。

html代码

<button class="jiance">检测</button>
  <div class="red">1</div>
  <div class="red">2</div>
  <div class="red">3</div>
  <div class="red">4</div>
  <div class="red">5</div>

怎么实现呢，如果用each循环，瞬间就变绿了

$(function(){
      $('.jiance').click(function(){
        $('div').each(function(idx,obj){
          $(this).removeClass('red').addClass('green');
        })
      })
    })

setTimeout(function () {
   $(obj).removeClass('red').addClass('green');
}, 1000);
这样写是不行的，这样等于每次修改css样式都延迟1秒，但是循环没有延迟，

等于所以循环瞬间完成，但所以修改css样式，都延迟1秒，所以效果是，点击“检测”1秒后，所以样式由红变绿，还是同时。

所以要第一个循环延迟1秒，第二个延迟2秒，依次类推，效果就是每秒钟由上往下数字依次变绿

$(function(){
      $('.jiance').click(function(){
        $('div').each(function(idx,obj){
          setTimeout(function () {
            $(obj).removeClass('red').addClass('green');
          }, idx*1000);
        })
      })
    })

$(function(){
      var time = 500;
      $('.jiance').click(function(){
        $('div').each(function(idx,obj){
          setTimeout(function () {
            $(obj).removeClass('red').addClass('green');
          }, time);
          var rand = sj();
          time += rand*1000;
        })
      })
    })
    function sj() {
      //x上限，y下限     
      var x = 5;
      var y = 1;
      var rand = parseInt(Math.random() * (x - y + 1) + y);
      return rand;
    }