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); 这个是不存在的，我想问一下为什么呢？？

阅读 4.7k

我们从实际的应用来表达一下你的意思吧
举个栗子，有这样一堆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>

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

jquery在循环中取i值

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？