Comment trouver la position de certains éléments dans une div?

Question

J'essaie de trouver la position de l'image dans mon div

mon 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> 

Je

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

Je peux savoir combien de temps les mêmes images apparaissent mais je peux » t dire quelle image l'utilisateur clique et sa position. Y a-t-il de toute façon à faire cela? Merci beaucoup!

Answer 1

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

Fiddle

Ici, je construit une recherche d'attributs d'images avec le même attribut source que le clic un, puis appeler .index(element) passage de l'élément cliqué comme référence. Comme index est 0-based, on ajoute 1.

Si ayant le même ancêtre div est important, adapter tout avec closest et find comme ce fut d'abord:

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

Updated fiddle

---

Pour obtenir une référence à l'image cliquée, il suffit d'utiliser le mot clé this dans le gestionnaire. Vous pouvez l'insérer dans un objet jQuery $(this) et y appeler les méthodes jQuery.

---

En outre, votre commentaire de code de question, je suppose que par position vous dire en fait le index de l'élément, mais si vous préférez obtenir la position littérale de l'élément vous pouvez utiliser le .offset() (par rapport à document) et .position() (par rapport aux méthodes parentes).

Side note: Si vous avez besoin de compter le nombre d'images avec la même source, vous pouvez le faire d'une manière beaucoup plus facile avec .length:

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

Encore une fois, ci-dessus suppose être à l'intérieur d'un portée du gestionnaire d'événements où this fait référence à un élément d'image. Vous pouvez facilement l'adapter pour interroger n'importe quel src cependant.

Answer 2

Vous pouvez utiliser l'index

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

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

    });