Déterminer l'indice d'image dans un div J'ai cliqué sur

Question

J'ai un code comme ceci:

<div id="thumbs"> 
    <img src="/media/img/banana.png" /> 
    <img src="/media/img/apple.png" /> 
    <img src="/media/img/lobster.png" /> 
    <img src="/media/img/charismatic_duck.png" />    
</div> 

Ce que je voudrais est de comprendre ce que le code suivant a besoin pour qu'il se connecte 1 si je clique sur la première image, 2 si je clique sur le côté, etc.

$("#thumbs img").click(function(){ 
    console.log(_____WHAT GOES HERE?_____) 
}); 

Je suis conscient que je pourrais ajouter des ID (image1, image2, etc.) et l'utiliser pour travailler dehors, mais je comme un moyen plus propre s'il y en a un.

Answer 1

console.log($(this).index() + 1) 

La méthode .index() renvoie un numéro d'index de base zéro du img qui a été cliqué (par rapport à ses frères et sœurs). J'ai ajouté + 1 pour vous donner l'index 1 que vous vouliez.

• http://api.jquery.com/index/

Il existe plusieurs autres façons d'appeler .index(). Sans arguments, il se comporte comme je l'ai décrit ci-dessus.