Question

我绝不是一个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警告'0'（预期），第二个div警告'1'（预期）。但是，点击最后'.ted' div（列表中的第四个）警告“3” - 为什么这不会给出2的索引？（因为JS数组基于0），这是第三 '.ted' div？

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

此处示例：http://jsfiddle.net/nha2f/6/

Answer 1

.index() method docs使此行为变得清晰。这是相关部分（重点补充）：

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

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

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

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

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

alert($(this).index(".ted"));

Answer 2

.index()返回其父级中被点击元素的索引，相对于它的兄弟姐妹。不与具有相同事件侦听器/ class / id的其他div进行比较。您的第三个'.ted' div是您body的第四个孩子。

Answer 3

要获得所需的行为，请在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在集合中查找该元素。

Answer 4

索引是父级中的子级。如果您想枚举.ted元素，请尝试以下方法：

$('.ted').each( function( i, a ){
    $(a).click( function(){
       alert( i ); // <- should be 0, 1 or 2.
    } );
} );

jQuery .index（）奇怪

4 个答案: