如何找到某個元素在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++; 
     } 
    }) 
})

我可以找出相同的圖像多少時間出現，但我可以」告訴用戶點擊哪個圖像，並確定其位置。有沒有辦法做到這一點？非常感謝！

來源

2013-02-13 FlyingCat

你的意思是不是'this.offsetLeft'和'this.offsetTop'其他？ – 2013-02-13 04:02:55

所以如果有人點擊div，你想要的輸出是什麼？ img的src屬性？ – kinakuta 2013-02-13 04:07:27

$('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。

來源

2013-02-13 04:04:28

第二個問題是什麼？ – Daedalus 2013-02-13 04:06:48

如果第二個問題指的是獲取點擊圖像的引用，只需在處理程序內部使用'this'即可。 – 2013-02-13 04:07:55

我的意思是說，在最後一句結尾處詢問了位置。我知道如何自己做，只是爲了清楚，但你的答案已經在這裏，並且除了這一點外，還有很多想法。我認爲這是明智的建議。 – Daedalus 2013-02-13 04:09:08

您可以使用索引

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

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

    });

來源

2013-02-13 04:04:36 YogeshWaran

如何找到某個元素在div內的位置？

回答

相關問題