Question

我有以下HTML结构

<div id="preview-wrapper">
    <div class="dz-preview dz-image-preview">
        <a class="rotate-a" href="javascript:void(0);">
            <img class="rotate" src="public/assets/img/rotate.png">
        </a>
    </div>

    <div class="dz-preview dz-image-preview">
        <a class="rotate-a" href="javascript:void(0);">
            <img class="rotate" src="public/assets/img/rotate.png">
        </a>
    </div>

    <div class="dz-preview dz-image-preview">
        <a class="rotate-a" href="javascript:void(0);">
            <img class="rotate" src="public/assets/img/rotate.png">
        </a>
    </div>

    <div class="dz-preview dz-image-preview">
        <a class="rotate-a" href="javascript:void(0);">
            <img class="rotate" src="public/assets/img/rotate.png">
        </a>
    </div>

    <div class="dz-preview dz-image-preview">
        <a class="rotate-a" href="javascript:void(0);">
            <img class="rotate" src="public/assets/img/rotate.png">
        </a>
    </div>
</div>

现在如果用户点击图片标记

<img class="rotate" src="public/assets/img/rotate.png">

此div内部（div的第四个数字）

<div class="dz-preview dz-image-preview"> ... </div>

我想找到用户点击他的子img标签的div索引号。

希望你明白我在寻找什么。

任何想法如何找到点击div索引号？

感谢。

Answer 1

您可以使用.index()

var $dics = $('.dz-image-preview img').click(function(){
    var index = $(this).closest('.dz-image-preview').index()
})

Answer 2

试试这个：

$(document).on("click", "img.rotate", function () {
  // get parent div element, then use index() function
  alert(
    $($(this).parents("div.dz-image-preview")[0]).index()
  );
});

Answer 3

使用index()方法返回指定元素相对于其他指定元素的索引位置。

$('a.rotate-a').click(function(){
  var divIndex = $(this).closest('.dz-preview').index('.dz-preview');
  alert(divIndex);
});

注意：如果找不到该元素，index()将返回-1

如何根据click元素获取DIV索引号

3 个答案: