How to get the index of css element inside 'click' event?

Question

I have a group of images with thumb class. In the click event, I want to know which image the user clicked from the thumbs array of images. Basically, I want the index of (this) image in thumbs array.

HTML

<img class="thumb" src="#" />
<img class="thumb" src="#" />
<img class="thumb" src="#" />
<img class="thumb" src="#" />

Javascript

var thumbs = $('.thumb'); 
$('.thumb').click(function(){

      current_thumb = ??;
});

You should give an data- attribute and get this from the click event, or give a id_index — Fals
– Fals, Commented Apr 27, 2015 at 16:19
If you were able to give each image an ID you could just identify them using that. then on click function use "var idx = $(this).attr('id')" - though this does add work to the initial code. — Silvertiger
– Silvertiger, Commented Apr 27, 2015 at 16:22
@Andrew every element has an index number, they don't need to be in an array. — zfrisch
– zfrisch, Commented Apr 27, 2015 at 16:23

Travis J · Accepted Answer · 2015-04-27 16:21:27Z

3

Use jQuery's index

var thumbs = $('.thumb'); 
$('.thumb').click(function(){
 var current_thumb = thumbs.index(this);
 alert(current_thumb);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="thumb" src="#" />
<img class="thumb" src="#" />
<img class="thumb" src="#" />
<img class="thumb" src="#" />

answered Apr 27, 2015 at 16:21

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get the index of css element inside 'click' event?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related