Question

我想遍历所有的.selector类元素，每次我希望它在添加类并运行它的队列函数之前等待x seonds

    $(".selector").each(function (i) {
        i = 1 + i;
        // like .delay(1000*i) before next event

        $(this).addClass('show').delay(2000*i).queue(function( next ){
            $(this).find('.achildselector').addClass('class');
            next();
        });

    });

所以在伪代码中。在x i秒后添加类，在x i秒后添加每个选择器的另一个类

Answer 1

如果我理解正确的话。您希望为每个具有间隔的父项添加一个类，并在每个父项中为具有间隔的子项添加一个类。像这样的东西？

＆＃13;

$(document).ready(function() {

  $(".selector").each(function(index, element) {
    var i = index + 1;
    setInterval(function() {
      $(element).addClass('show');
      $(element).find('.achildselector').each(function(spanIndex, span) {
        var j = spanIndex + 1;
        setInterval(function() {
          $(span).addClass('class');

        }, j * 1000);
      });
    }, i * 2000);

  });
});

＆＃13;

.selector {
  width: 100%;
  background-color: #000;
  color: #fff;
  margin-bottom: 5px;
}

.show {
  border: 1px solid yellow;
}

span {
  color: red;
}

.class {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
  Div 1
  <span class="achildselector">child 1</span>
  <span class="achildselector">child 2</span>
  <span class="achildselector">child 3</span>
</div>
<div class="selector">
  Div 2
  <span class="achildselector">child 1</span>
  <span class="achildselector">child 2</span>
  <span class="achildselector">child 3</span>
</div>

＆＃13;

Answer 2

我相信你的问题是你在每次迭代时都失去了对元素的引用，这就是为什么你可以使用closure来保存值，如下所示：

$(".selector").each(function (i) {
    i = 1 + i;
    // like .delay(1000*i) before next event

    (function(e, delay) {
        return function() {
            e.addClass('show');
            setTimeout(function() {
                e.find('.achildselector').addClass('class');
            }, delay);
        }
    })($(this), 1000*i);
});

jquery在延迟之间添加class和removeclass

2 个答案: