Question

HTML：

<div class="div1">Div 1</div>
<div class="div2">Div 2</div> 
<div class="div3">Div 3</div> 
<div class="div4">Div 4</div> 

<div class="test">Test</div>
<br />
<div class="test">Test</div>
<br />
<div class="test">Test</div> 
<br />
<div class="test">Test</div>
<br />

Jquery的：

$(".test").each(function(){
    var i = $(this).index();
    alert(i);
});

Fiddle Demo

我希望结果是0, 1, 2, 3，但为什么输出为4, 6, 8, 10？

Answer 1

轻松修复 - .each支持索引：

$(".test").each(function(idx){
    alert(idx);
});

Answer 2

为什么输出为4, 6, 8, 10

$(this).index()返回元素相对于兄弟的索引，而不是选定的元素。 br和.divX元素也是兄弟姐妹！

看起来你想要：

var $tests = $(".test");

$tests.each(function(){
    var i = $tests.index(this);
    alert(i);
});

或更简单：

$(".test").each(function(i){
    alert(i);
});

Answer 3

index（）给出了与其兄弟姐妹相关的元素索引。带有类文本的第一个div是第5个元素并且具有索引4，br是5个索引，而下一个div与类test具有索引6，依此类推。我们可以通过以下演示检查每个元素的索引

<强> Live Demo

$("#parent1 *").each(function () {
    alert("TagName >> " + this.tagName + ", Index >> " + $(this).index() + ", Text " + $(this).text());
});

如果没有将参数传递给.index（）方法，则返回值为一个整数，表示第一个元素在其中的位置 jQuery对象相对于其兄弟元素Reference。

Answer 4

你想要做的是：

$(".test").each(function(i) {
    alert(i);
});

.index()返回相对于其兄弟姐妹的索引。

Answer 5

你必须相对于你正在测试的内容。使用：

$(".test").each(function(){
    var i = $('.test').index($(this));
    console.log(i);
});

<强> jsFiddle example

根据.index()上的文档：

如果在元素集合和DOM元素上调用.index（）或传入jQuery对象，.index（）返回一个指示的整数传递元素相对于原始集合的位置。

为什么index（）没有按预期工作

5 个答案: