Question

我试图逐个检查列表项，并且它们之间有1秒的延迟。有四个列表，我可以使用以下方法在加载的同时检查所有项目：

$( document ).ready( function(){
  $('#featured').children('li').each(function() { 
    $(this.tagName + '> ul').children('li').each(function() {
        $(this.tagName  + '> i').attr('class', 'fa fa-check-square-o fa-lg');       
    });
  });
});

但是，当我尝试包含setTimeout时，没有任何事情发生。

$( document ).ready( function(){
  $('#featured').children('li').each(function() { 
    $(this.tagName + '> ul').children('li').each(function() {
      setTimeout(function() 
      {
        $(this.tagName  + '> i').attr('class', 'fa fa-check-square-o fa-lg');
      }, 1000); 

    });
  });
});

我怀疑this变量不在setTimeout处理程序的范围内。

更新：

自从我发布问题后，我清理了一下我的代码。通过将this更改为el，我可以使代码正常工作，但是setTimeout函数只会延迟一次并同时更改所有列表项的类。

这是我的HTML（顶部列表中有更多项目，但我将其缩减为一个示例）：

<ul id="featured">
  <li><h3>Full Home Inspections</h3>
      <ul class="fa-ul">
        <li><i class="fa fa-square-o fa-lg"></i> Gutters &amp; Downspouts</li>
        <li><i class="fa fa-square-o fa-lg"></i> Eaves, Soffits &amp; Fascia</li>
        <li><i class="fa fa-square-o fa-lg"></i> Main Water Shut-off</li>
        <li><i class="fa fa-square-o fa-lg"></i> Heating and AC</li>
      </ul>
      <a href='inspections.html'> And more</a>
  </li>
</ul>

这是我的新剧本：

$( document ).ready( function(){
    $('#featured > li > ul').children('li').each(function(i, el) {
      setTimeout(function(){
        $(el.tagName + '> i').attr('class', 'fa fa-check-square-o fa-lg');
      }, (i * 1000));       
    });
});

我意识到这不再是范围问题，但我仍然需要帮助，所以我更新了问题。

Answer 1

你是对的不是，如果你遇到这个问题，修复通常是将this变量存储在另一个局部变量中，即使在嵌套函数中也是如此。但是，也许你正在寻找类似(JSFiddle)的东西：

$(document).ready(function () {

    $('#featured').children('li').each(function () {
        lagAddingClasses($("i", this));
    });

    function lagAddingClasses($to) {
        var interval = setInterval(function() {
            if($to.length == 0) {
                clearInterval(interval);
                return;
            }
            $to.eq(0).attr('class', 'fa fa-check-square-o fa-lg');
            $to = $to.slice(1);
        }, 1000);   
    }
});

没有看到你的标记，实际上你不清楚你想要实现什么，但你的选择器使用似乎很奇怪。

Answer 2

为什么不：

$( document ).ready( function(){
  setTimeout(function() 
  {
    $('#featured').children('li').each(function() { 
      $(this.tagName + '> ul').children('li').each(function() {
        $(this.tagName  + '> i').attr('class', 'fa fa-check-square-o fa-lg');
      });
    });
  }, 1000);
});

Answer 3

是的，这是一个关于失去范围的问题：你可以做的是在变量中保存这个值的引用，然后在setTimeout中使用它。

$( document ).ready( function(){
  $('#featured').children('li').each(function() { 
    $(this.tagName + '> ul').children('li').each(function() {
      var that = this
      setTimeout(function() 
      {
        $(that.tagName  + '> i').attr('class', 'fa fa-check-square-o fa-lg');
      }, 1000); 

    });
  });
});

嵌套的setTimeout无法使用＆＃39;这个＆＃39;变量

3 个答案: