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

【问题标题】：Find index of item within a specific div where multiple divs exist在存在多个 div 的特定 div 中查找项目的索引
【发布时间】：2015-12-13 05:43:49
【问题描述】：

我有一个包含许多图像的 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 项，则值为3。可能的答案只能是 1、2、3 或 4，因为每行最多只能有 4 个项目。

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

这是我所拥有的：

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

有什么想法吗？

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

【问题讨论】：

“结果总是基于整个项目列表，所以我得到的答案是最后一个项目的 7。相反，这应该是 3”——这是一个简单的模 4 可以很容易解决的“问题”……

标签： javascript jquery indexing

【解决方案1】：

试试这个。

$('.staff-item img').click(function(){
  var itemPosition = $(this).closest(".staff-row").find(".staff-item img").index(this);
  alert(itemPosition);
});

也更新了您的 jsfiddle https://jsfiddle.net/prakashlaxkar/vo6hz1zc/3/。谢谢

【讨论】：

【解决方案2】：

你想要的是先得到正确的行，然后得到你可以循环遍历行的索引：

$('.staff-item img').click(function(){
    $this=$(this);
    var itemPosition = $(".staff-row").each(function(){
        itemPosition=$("img",$(this)).index($this);
        if(itemPosition>-1){
            console.log(itemPosition);
        }
    });
});

如果可能的话，更好的选择是从中选择孩子并在父母中搜索：

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

【讨论】：

【解决方案3】：

您应该找到被点击的this 的父的索引，即img。

同时添加1，因为索引从0开始

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

JSFiddle

【讨论】：