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行，则值为3。可能的答案应该只有1,2,3或4，因为每行最多只能有4个项目。

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

这就是我所拥有的：

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

有什么想法吗？

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

Answer 1

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

同时添加1作为索引从0

开始

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

JSFiddle

Answer 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)
});

Answer 3

试试这个。

$('.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/。感谢

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

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

3 个答案:

JSFiddle