javascript - JQuery .index() 不返回元素的正确索引

Question

起初我的HTML：

<h2>
  <a href=[...]>
    <expander>
      SomeText
</expander>
  </a>
</h2>

<h2>
  <a href=[...]>
    <expander>
      SomeText
</expander>
  </a>
</h2>

现在是 Javascript/JQuery：

$("expander").on("click", function(){
    var blubb = $(this).index();
            alert(blubb)
});

我的问题是“警报”（实际上是“blubb”变量）总是抛出零。如果我单击第二个扩展器，它不应该给出“1”吗？

谢谢！

问候

Answer 1

因为expander它的父索引的第一个也是唯一的孩子总是会返回0。

尝试这个：

var blubb = $(this).closest('h2').index();

演示

先试后买

Answer 2

您需要这样做以获得正确的expander点击索引：

$("expander").on("click", function (e) {
    e.preventDefault();
    var blubb = $("expander").index(this);
    alert(blubb)
});

小提琴演示

Answer 3

.index()不带任何参数将给出元素相对于其兄弟元素的索引

在您的情况下，您需要找到相对于页面中扩展器元素的单击扩展器的索引，因此请尝试

var $expanders = $("expander").on("click", function(){
    var blubb = $expanders.index(this);
    alert(blubb)
});

演示：小提琴