对$(this).index()的一点见解

参考:http://www.w3cfuns.com/notes/18316/5e6c82c28f4178fda5d628faa9317cd8.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>

        <script>
            $(document).ready(function() {
                $("h1").click(function() {
                    alert($(this).index());   //0,4,8
                });
            });
        </script>
    </head>

    <body>

        <h1 class="main">Coffee</h1>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <h1 class="main">Milk</h1>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <h1 class="main">Soda</h1>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>

    </body>

</html>

MD,还以为是jQuery BUG,修改

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>

        <script>
            $(document).ready(function() {
                $("h1").click(function() {
                    alert($(this).index('.main'));   //0,1,2
                });
            });
        </script>
    </head>

    <body>

        <h1 class="main">Coffee</h1>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <h1 class="main">Milk</h1>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <h1 class="main">Soda</h1>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈</p>

    </body>

</html>

1.$(this).index()的理解

$(selector).index()获得第一个匹配元素相对于其同级元素的 index 位置。例如:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("ul li.hot").click(function(){
    alert($(this).index());          //1,2
  });
});
</script>
</head>
<body>

<p>Click the button to get the index of the element with id="favorite", relative to the jQuery selector (class="hot"):</p>
<button>Get index</button>

<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot">Coffee</li>
</ul>

</body>
</html>

点击第一个拥有hot的li返回的index是1

而$(selector).index(element)获得元素相对于选择器的 index 位置。该元素可以通过 DOM 元素或 jQuery 选择器来指定。例如:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("ul li.hot").click(function(){
    alert($(this).index('.hot'));
  });
});
</script>
</head>
<body>

<p>Click the button to get the index of the element with id="favorite", relative to the jQuery selector (class="hot"):</p>
<button>Get index</button>

<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot">Coffee</li>
</ul>

</body>
</html>

点击第一个hot的li返回的是index为0

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值