jquery在循环中取i值

for(var i=0;i<slideLength;i++){
        $(".slide").eq(i).index=i;
        $(".slide").eq(i).on("click",function(){
            console.log($(this).index);
        });
    }

我想问一下，我用$(".slide").eq(i)这句话来取第i个节点，还有其他方法吗，最重要的是console.log($(this).index); 这个是不存在的，我想问一下为什么呢？？

要用闭包把循环的包裹起来

我们从实际的应用来表达一下你的意思吧
举个栗子，有这样一堆li

<ul class="list">
    <li>Bootstrap</li>
    <li>jQuery</li>
    <li>gulp</li>
    <li>angular</li>
</ul>

我希望点击每个li，都能够在控制台中输出li的内容，于是可以这样写

$(function() {
    $('.list').on('click', function(e) {
        console.log($(e.target).html());
    })
});

你运行试试看，效果已经达到了。
这里运用了事件委托的思想，在点击时，使用 $(e.target)来判断被点击的对象
其中 e.target是DOM对象，表示的是被点击的li，
$(e.target)当然就是被点击那个li的jQuery对象了

也许在其他的一些应用场景中，你需要得到被点击li的序列，比如幻灯片切换效果的那一堆小按钮，除了在li中直接设置1,2,3,4之外，现在还流行一种做法，就是设置诸如data-item之类的属性值

整个例子的完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-2.0.3.js"></script>
</head>
<body>
    <ul class="list">
        <li>Bootstrap</li>
        <li>jQuery</li>
        <li>gulp</li>
        <li>angular</li>
    </ul>
</body>
<script>
$(function() {

    $('.list li').each(function(i) {
        $(this).attr('data-item', i);
    })

    $('.list').on('click', function(e) {
        var $curLi = $(e.target);
        console.log($curLi.html()); //输出当前li的值
        console.log($curLi.attr('data-item')); //输出当前li的序列
    })
});
</script>
</html>

你这代码有很大的优化空间啊，
$(".slide").each(function(i){
$(this).attr('index',i).on('click',function(){

 Console.log($(this).attr('index'));

})
});


for(var i=0;i<slideLength;i++){
    $(".slide").eq(i).attr("index",i);
      $(".slide").eq(i).on("click",function(){
          console.log($(this).attr("index"));
      });
}

试试看

.index添加自定义属性是js的方式。
jquery对属性操作不是attr么。

// each 每个 .slide 增加 data('index') 值
$('.slide').each(function(idx){
  $(this).data('index') = idx;
}).on('click', function(){
  // 绑定事件的时候不需要each, jquery会做这一部分
  console.log($(this).data('index'));
})

获取序号不是有index()么。。

$(".slide").on("click",function(){
      console.log($(this).index());
  });

【热门文章】