您的位置：首页 > 其它

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

2014-07-25 20:41 190 查看
写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的理解问题。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航