Javascript 如何获取DOM中深层元素的索引

在下面的html中，我是否可以知道我相对于div.grid点击了哪个链接

<div class="grid">
  <figure class='grid-item'>
    <figcaption>
      <a>link</a>
    </figcaption>
  </figure>
  <figure class='grid-item'>
    <figcaption>
      <a>link</a>
    </figcaption>
  </figure>
  <figure class='grid-item'>
  .....
  </figure>
  ....
</div>

但在前两种情况下，它在每个链接上返回-1，在第三种情况下返回-2（始终在每个链接上）。

应该是这样的

var index = $(this).closest('.grid-item').index();

演示：

$（'a'）。单击（函数（）{
var index=$（this）.closest（'.grid item'）.index（）；
警报（索引）；
})

链接
链接
链接

如果获得所有链接的集合，则可以基于该集合获取索引：

//将节中的所有链接收集到一个数组中：
var links=Array.prototype.slice.call（document.queryselectoral（“.grid a”）；
//为它们设置事件处理程序：
links.forEach（函数（link）{
link.addEventListener（“单击”，函数（）{
//只需获取当前链接在数组中的位置
log（links.indexOf（this））；
});
});

链接
链接
链接
您需要检索父图形元素的索引。不是锚标记的索引


jQuery（document）.on（“click”，“.grid a”，function（））{
var figure=jQuery（this.parent（）.parent（）；
//检索图形的索引。
var index=jQuery（图）.index（）；
警报（索引）；
});

链接
链接
请澄清所附的事件侦听器是什么。。。你想要一个索引吗？如果是，相对于什么？或者，您真的需要识别单击的链接吗？换句话说，您需要标识链接的原因是什么？您是否在链接上使用事件侦听器？如果是，请在问题中包含代码。
var index = $(this).closest('.grid-item').index();