Question

我正在尝试在div中找到图像位置

我的Html

<div>
  <p>test</p>
  <img src='test1.jpg'/>  
  <p>test</p>
  <p>test</p>  
  <img src='test2.jpg'/>  
  <p>test</p>
  <img src='test2.jpg'/>  --the user clicks this image and I want to know the time it appears. In this case, 2 is what I need.
  <p>test</p>
  <img src='test2.jpg'/>
  <p>test</p>
</div>

我有

var imagePosition=0;
$('img').click(function(){
     var imgSource=$(this).attr('src');
    $(this).closest('div').find('img').each(function(){
       if($(this).attr('src')==imgSource){
          imagePosition++;
       }
    })
})

我可以找出相同图像出现的时间，但我无法确定用户点击的图像及其位置。反正有没有这样做？非常感谢！

Answer 1

$('img').click(function() {
    var clickedIndex = $('img[src="'+ $(this).attr('src') +'"]').index(this) + 1;
    console.log(clickedIndex);
});

Fiddle

这里我构建了一个属性搜索图像，其属性与被点击的图像具有相同的源属性，然后调用.index(element)将被点击的元素作为参考。由于index为0-based，我们会加1。

如果拥有相同的祖先div非常重要，那么只需按照最初的closest和find进行调整：

var clickedIndex = 
     $(this).closest('div')
    .find('img[src="'+ $(this).attr('src') +'"]').index(this) + 1;

Updated fiddle

要获取对单击图像的引用，只需在处理程序中使用this关键字。您可以将其包装在jQuery对象$(this)中，然后在其上调用jQuery方法。

另外，通过你的问题的代码注释，我假设position你实际上是指元素的index，但是如果你想要得到元素的文字位置，你可以使用.offset()（相对于文档）和.position()（相对于父级）方法。

旁注：如果您需要计算具有相同来源的图片数量，可以使用.length更轻松地完成此操作：

var countImages = $('img[src="'+ $(this).attr('src') +'"]').length;

同样，上面假设在this引用图像元素的事件处理程序范围内。您可以轻松地调整它以查询任何src。

Answer 2

您可以使用索引

   $('img').click(function(){

         index =  $(this).closest('div').find('img').index(this) + 1;

   });

如何在div中找到某个元素的位置？

2 个答案: