Как найти позицию определенного элемента внутри div?

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

я могу узнать, сколько времени появляются одни и те же образы, но я могу» t скажите, на какое изображение нажимается пользователь и его позиция. Так или иначе, чтобы это сделать? Спасибо!

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; 

    });