如何获取包装元素内具有类名的当前元素的索引

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);这样就会选择test里面的第3类wraper。

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

当我单击带有类名的 div 时test，我需要获取该 div 内该 div 的索引wraper。

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

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

还有其他替代方法可以做到这一点吗？因为在我的真实场景中可能会有多个级别的父母。

小提琴

Answer 1

您可以使用.index()的第三个版本，它根据调用 .index() 的元素集返回传递项的索引

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

演示：小提琴