How to get an index of an element of a specific class

Question

I need to get an index of the item I clicked, but only an index of items with a specific class.

<div class="gallery">

   <div class="gallery-item"></div>
   <div class="gallery-item"></div>
   <div class="gallery-item select-gallery-item"></div> <!-- click on this -->
   <div class="gallery-item"></div>
   <div class="gallery-item"></div>
   <div class="gallery-item select-gallery-item"></div>
   <div class="gallery-item select-gallery-item"></div>
   <div class="gallery-item select-gallery-item"></div>

</div>

$('.gallery').on('click', '.select-gallery-item', function () {
   $(this).index();
};

For example, I click on this element with a class '.select-gallery-item', I will get an index - 2. But among the elements with the class '.select-gallery-item', its index - 0

Taplar · Accepted Answer · 2020-04-20 15:28:35Z

3

Call index(this) off of the selected elements the index should be based upon.

$('.gallery').on('click', '.select-gallery-item', function () {
   console.log($('.select-gallery-item').index(this));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">

   <div class="gallery-item">a</div>
   <div class="gallery-item">b</div>
   <div class="gallery-item select-gallery-item">c</div> <!-- click on this -->
   <div class="gallery-item">d</div>
   <div class="gallery-item">e</div>
   <div class="gallery-item select-gallery-item">f</div>
   <div class="gallery-item select-gallery-item">g</div>
   <div class="gallery-item select-gallery-item">h</div>

</div>

answered Apr 20, 2020 at 15:28

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

4 Comments

M A Salman Over a year ago

also $('.gallery >.select-gallery-item').click(function () { console.log($(this).index('.select-gallery-item')); }); will work?

Taplar Over a year ago

@Supercool. It will not work if the elements are dynamic, as suggested by the usage of a delegate event handler.

Charu Rajput Over a year ago

When we click, it console 0, 1 , 2 why? Could you please explain. I suppose we need to show index of the element that has class select-gallery-item

Taplar Over a year ago

@Charu It logs 0, 1, 2 because the index is based off of the result stack of the previous lookup, which contains only the elements with the desired class.

Collectives™ on Stack Overflow

How to get an index of an element of a specific class

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related