jquery - 如何在包装器元素中获取具有类名的当前元素的索引

Question

这是html，

<div id="wraper">
    <div>
        <div class="test">1</div>
    </div>
    <div>
        <div class="test">2</div>
    </div>
    <div>
        <div class="test">3</div>
    </div>
    <div>
        <div class="test">4</div>
    </div>
    <div>
        <div class="test">5</div>
    </div>
</div>

$("#wraper").find(".test").eq(2);这将选择 wraper 中的第 3 个 test 类。

我需要在单击 .test div 时获取该索引(我已将其作为参数传递给 eq())。

当我点击类名为 test 的 div 时，我需要在 wraper div 中获取该 div 的索引。

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

此代码将始终返回 0，因为 test div 具有父 div。所以如果我使用 $(this).parent().index()，它将返回正确的索引。

还有其他替代方法吗？因为在我的真实场景中可能会有多个级别的 parent 。

Fiddle

Answer 1

您可以使用 .index() 的第 3 版它根据调用 .index() 的元素集返回 passes 项目的索引

var $tests = $(".test").click(function () {
    alert($tests.index(this));
});

演示:Fiddle