jQuery 在延迟之间添加类和删除类

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

如果我理解正确的话。 您想使用间隔向每个父级添加一个类

，并在每个父级中向具有间隔的子级添加一个类。像这样的东西？

$(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);
  });
});

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

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

Answer 2

我相信

你的问题是你在每次迭代中都失去了对元素的引用，这就是为什么你可以使用闭包来保存值，就像这样：

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