• DOM方法index()相关问题(为何$(this).index(this)是错误的 )


    写jQuery的时候遇到一个关于index()的问题,查找相关资料后,解决了,把自己的想法写在下面。

    index() 方法返回指定元素相对于其他指定元素的 index 位置。

    完全语法为:$(selector).index(element) ,其中element为可选参数。 

     

    1、若是省略element,则 获得第一个匹配元素相对于其同胞元素的 index 位置。 

    例如在如下代码中

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("ul li").click(function(){
        alert($(this).index());
      });
    });
    </script>
    </head>
    <body>
    <p>点击列表项可获得其相对于同胞元素的 index 位置:</p>
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Soda</li>
    </ul>
    </body>
    </html>
    

     $(this).index();     $(this)代表的是点击的那个 li 元素,index()获得是这个 li 元素(它本身即是第一个匹配自己的元素)相对于它的同胞元素的索引值。这个是正确的,是我们所需要的效果。

    若是写成:$('ul li').index(); 则输出的值都是 0 ,因为 $('ul li').index() 获取的是li元素下第一个匹配的元素相对于同胞元素的索引值,即第0个元素。

    2、不省略element元素

    还是上述代码,若改成$(this).index(this),则输出的值全部为0。

    这是因为,加上了element元素后  $(selector).index(element),是获得元素相对于选择器的 index 位置。

    也就是说,$(this).index(this) 这样写的话,我们是获取的当前点击的 li 相对于它本身的位置,即0。

    若是写成 $('ul li').index(this) 则是可以的,因为获取到的是点击的 li 元素相对于选择器选择的ul下的 li 元素的位置,因此可以得到正确的索引值。

    总结

    综上,我们知道 $(this).index()  =  $('ul li').index(this) ,这两种方式在我们的语境中能正确的获取到元素的索引值。

    这说白了还是对选择器(selector)和this的理解问题。

  • 相关阅读:
    模拟赛20181101 雅礼 Wearry 施工 蔬菜 联盟
    模拟赛20181031 雅礼 Wearry 养花 折射 画作
    set/priority_queue的运算符重载
    set的完整用法
    最长公共上升子序列 O(n^2)
    无向图边双联通分量 tarjan 模板
    ID 迭代加深搜索 模板 埃及分数
    树上背包DP Luogu P2014 选课
    A* 第k短路
    [POJ3468]关于整数的简单题 (你想要的)树状数组区间修改区间查询
  • 原文地址:https://www.cnblogs.com/liu-l/p/3868937.html
Copyright © 2020-2023  润新知