查找存在多个 div 的特定 div 中的项目索引

Question

我有一个由许多图像组成的 HTML 设置，这些图像包装在 div 中，这些图像将 4 个项目包装为一行。例如，每行 4 个项目，2 行：

<div class="staff-wrapper">
    <div class="staff-row">
        <div class="staff-item">
            <img>
        </div>
        <div class="staff-item">
            <img>
        </div>
        <div class="staff-item">
            <img>
        </div>
        <div class="staff-item">
            <img>
        </div>
    </div>
    <div class="staff-row">
        <div class="staff-item">
            <img>
        </div>
        <div class="staff-item">
            <img>
        </div>
        <div class="staff-item">
            <img>
        </div>
        <div class="staff-item">
            <img>
        </div>
    </div>
</div>

我希望能够在单击图像时识别该项目在其行中的索引。

因此，如果单击一行的第三项，则该值将为3。可能的答案只能是 1、2、3 或 4，因为每行最多只能有 4 个项目。

我几乎有了这个，但是我发现结果总是基于整个项目列表，所以我得到了像7最后一个项目一样的答案。相反，这应该是 3`，因为它是该行中的第三项。

这是我所拥有的：

var itemPosition = $(".staff-row img").index(this);

有任何想法吗？

JS 小提琴https://jsfiddle.net/vo6hz1zc/

Answer 1

您应该找到被单击的父级的索引。thisimg

还添加1索引从0

$('.staff-item img').click(function(){
    var itemPosition = $(this).parent().index() + 1;
    console.log(itemPosition);
});

JSFiddle