0

我绝不是 jQuery（或 JavaScript）专家，所以如果我误解或忽略了某些东西，请原谅我。我有以下 HTML：

<html>
    <body>
        <div class="ted">Ted</div>
        <div class="ted">Ted</div>
        <div class="tim">Tim</div>
        <div class="ted">Ted</div>
        <div class="tim">Tim</div>
    </body>
</html>

以及以下JS：

$('.ted').click(function() {
    alert($(this).index());
});

当我单击带有该类'.ted'的 div 时，警报应显示该 div 的索引div。

单击第一个 div 警报“0”（预期），第二个 div 警报“1”（预期）。但是，单击最后一个'.ted' div（列表中的第四个）警报“3” - 为什么它没有给出索引 2？（因为 JS 数组是基于 0 的），这是第三个 '.ted' div？

好像$('.ted')实际上是带回了列表中的所有 div？

这里的例子：http: //jsfiddle.net/nha2f/6/

4

4 回答 4

3

.index()方法文档清楚地说明了这种行为。以下是相关部分（重点添加）：

如果没有参数传递给该.index()方法，则返回值是一个整数，指示 jQuery 对象中的第一个元素相对于其兄弟元素的位置。

由于与选择器匹配的第三个元素实际上是其父元素的第四个子元素，因此它的索引为 3。

继续阅读文档以找到问题的解决方案：

如果选择器字符串作为参数传递，则.index()返回一个整数，指示原始元素相对于选择器匹配的元素的位置。

因此，您可以将相同的选择器传递给.index()它，它将返回元素相对于匹配集的索引：

alert($(this).index(".ted"));
于 2012-12-07T09:46:41.237 回答
0

.index()返回被点击元素在其父元素中的索引，相对于它的兄弟元素。没有与其他div具有相同事件侦听器/类/id的s相比。你的第三个'.ted' div是你的第四个孩子body。

于 2012-12-07T09:47:59.870 回答
0

要获得您想要的行为，请在您的index调用中添加一个选择器：Fiddle

$('.ted').click(function() {
    alert($(this).index(".ted"));
});

当您将选择器传递给 时index，它会告诉 jQuery 在该集合中查找元素。如果你不这样做，它会查看它相对于所有兄弟元素的位置。

或者，记住 ted 元素的列表，然后反转事物：Fiddle

var teds = $(".ted");
teds.click(function() {
    alert(teds.index(this));
});

当您将元素传递给 时index，它会告诉 jQuery 在集合中查找该元素。

于 2012-12-07T09:48:14.867 回答
0

索引是父项中的子项。如果你想枚举.ted元素试试这个：

$('.ted').each( function( i, a ){
    $(a).click( function(){
       alert( i ); // <- should be 0, 1 or 2.
    } );
} );
于 2012-12-07T09:50:57.623 回答