jquery - 每个 child 都做同样的事情，但有时间间隔

Question

我希望 #house 子图像添加类 .active 但不是同时添加(当前我的脚本就是这样做的)，首先我想要第一个 img 元素获取类 .active 然后第二个并无限循环

    function ind(){
        $('#house').children().toggleClass('active');
    }
    setInterval(ind,2000);

        <div id="house">
            <img class="saxli" src="saxli.png">
            <img class="roof" src="roof.png">
            <img class="door" src="door.png">
            <img class="sabole" src="sabole.png">
            <img class="window1" src="window1.png">
            <img class="window2" src="window2.png">
        </div>

        .active {
            transform: scale(1.1);
        }

Answer 1

要实现此目的，您需要在每 2 秒调用一次的 ind() 函数中计算出哪个元素具有 active 类，然后将其移动到下一个img。如果没有元素具有该类，或者最后一个元素具有该类，则使第一个 img 再次处于事件状态。试试这个:

var $imgs = $('#house img');

function ind() {
  var $current = $imgs.filter('.active').removeClass('active');
  var $target = $current.next();
  if ($target.length === 0)
    $target = $imgs.first();
    
  $target.addClass('active');
}

ind(); // call on page load
setInterval(ind, 2000); // call every 2 seconds

img {
  display: inline-block;
  border: 1px solid #C00;
  width: 50px;
  height: 50px;
}

.active {
  transform: scale(1.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="house">
  <img class="saxli" src="saxli.png">
  <img class="roof" src="roof.png">
  <img class="door" src="door.png">
  <img class="sabole" src="sabole.png">
  <img class="window1" src="window1.png">
  <img class="window2" src="window2.png">
</div>