For循环不适用于Jquery选择器答案

【问题标题】：For loop not working on a Jquery selectorFor循环不适用于Jquery选择器
【发布时间】：2014-02-20 04:21:39
【问题描述】：

在 for 循环上苦苦挣扎.. 我似乎无法让它工作.. 尝试向 (".circle" + (i+1)) 选择器添加一个 for 循环，但不隐藏和淡入一个圆圈（i ）。这是可能的还是类似的方法？

任何帮助将不胜感激！

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<ul class="menu">
  <li class="first"><a href="#btn1">btn1</a></li>
  <li class="second"><a href="#btn2">btn2</a></li>
  <li class="third"><a href="#btn3">btn3</a></li>
  <li class="forth"><a href="#btn4">btn4</a></li>
</ul>

<div class="circle1 circle">1</div>
<div class="circle1 circle">2</div>
<div class="circle1 circle">3</div>
<div class="circle4 circle">4</div>

<script>
for(i=0;i<$(".menu li").length;i++){
    $(".menu li").eq(i).on('click',function(){
      $(".circle").hide();
      $('.circle'+(i+1)).stop().fadeIn('300');
      return false;
    });
  }
</script>
</body>
</html>

【问题讨论】：

简答：闭包。 i 总是等于它在点击处理程序中循环结束时的值。

标签： jquery for-loop selector

【解决方案1】：

您的问题在于变量的范围。 i 将始终具有在您的单击处理程序中循环结束时的值。你可以这样修复它：

for(i=0;i<$(".menu li").length;i++){
    (function(j) {
        $(".menu li").eq(j).on('click',function(){
            $(".circle").hide();
            $('.circle'+(j+1)).stop().fadeIn('300');
            return false;
        });
    })(i);
}

上面的内容是通过使用立即调用函数表达式 (IIFE) 创建一个闭包，该表达式创建一个新范围并在循环期间复制 i 的值。

它还将在循环之前将 $(".menu li").length 分配给一个变量，这样 jQuery 就不会在每次循环时都重新创建集合。

要了解发生了什么，请比较一下：

for(i=0;i<5;i++){
    setTimeout(function() {
        console.log(i);
    },100);
}

// outputs: 5 5 5 5 5

到这里：

for(i=0;i<5;i++){
    (function(i) {
        setTimeout(function() {
            console.log(i);
        },100);
    })(i);
}

// outputs: 0 1 2 3 4

http://jsfiddle.net/PLsUN/

【讨论】：

【解决方案2】：

Matt Burland 的回答是正确且非常透彻的。这只是避免使用for 循环的替代建议（如果您愿意的话）：

// Use the jQuery's already-available `.each` method
$(".menu li").each(function(index, list_element){

    (function(list_index){ // as per Matt's answer
        list_element.on('click',function(){
            $(".circle").hide();
            $('.circle'+(list_index+1)).stop().fadeIn('300');
            return false;
        }
    })(index);

});

效果是一样的，没有性能差异（据我所知）；我觉得它稍微干净一些。

【讨论】：