Question

我尝试做的是使用jQuery每500毫秒为每个＆＃34; li＆＃34;添加一个类。位于＆＃34; ul＆＃34;内的元素ID为＃menu-offcanvas。

我可以使用此

显着设置所有ID

setTimeout(function(){
  $('#menu-offcanvas li').addClass('myclass');
},500);

但我需要它做的是循环通过那些＆＃34; li＆＃34;元素并立即将该类添加到第一个，然后每500毫秒添加到以下＆＃34; li＆＃34;元件。

我怎样才能做到这一点？

Answer 1

尝试使用.queue()

var menu = $("#menu-offcanvas");

menu.queue("addClass", $.map(menu.find("li"), function(el, i) {
  return function(next) {
    $(el).addClass("myclass");
    setTimeout(function() {
      next()
    }, 500)
  }
})).dequeue("addClass");

.myclass {
  background: skyblue;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu-offcanvas">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

Answer 2

var timeDif = 0;
$($('#menu-offcanvas li').get().reverse()).each(function () {
    var $el = $(this);
    setTimeout(function () {
        $el.addClass('myclass');
    },500 * timeDif);
    timeDif++;
});

Here是一个有效的例子

Answer 3

用作功能：

var myInterval = setInterval(function(){
    if($('#menu-offcanvas li:not(.myclass)').first().length) {
        $('#menu-offcanvas li:not(.myclass)').first().addClass('myclass');
    } else clearInterval(myInterval);
}, 500);

DEMO

Answer 4

使用setInterval而不是Timeout和.first（）方法，注意代码未经测试

var myVar = setInterval(function(){

  var firstLI = $('#menu-offcanvas li').first();

  if(firstLI){
    $('#menu-offcanvas li:not(.myclass)').first().addClass('myclass');
  }else{
    clearInterval(myVar)
  }

}, 500);

Answer 5

以Cari的回答为基础：

// Define the scope and then run once:
var target = '#menu-offcanvas li:not(.myclass):first';
$(target).addClass('myclass');

// Set interval to run the same thing until there is no need to run any more:
var myInterval = setInterval(function(){
    var item = $(target);
    item ? item.addClass('myclass') : window.clearInterval(myInterval);
}, 500);

我们将查询存储为字符串，以便我们可以每隔一段时间运行它。或者，我们可以存储列表项的集合并在每个时间间隔对其进行切片以节省一点CPU能力：

// Define the scope and then run once:
var $target = $('#menu-offcanvas li:not(.myclass)');
$target.first().addClass('myclass');

// Set interval to run the same thing until there is no need to run any more:
var myInterval = setInterval(function(){
    // remove the first item
    $target = $target.slice(1);
    // if the collection's length is still true
    // add the class to the first item
    // else end the timer
    $target.length ? $target.first().addClass('myclass') : window.clearInterval(myInterval);
}, 500);

DEMO

Jquery - 每500毫秒添加一次类

5 个答案: