How to get the index of clicked element by class?

Question

I want to get the index of the clicked element in its list as well in its .blue class.

I figured out how to get the index in its list, but I can't figure out how to get the index in its .blue class. For example when I click the 5th button I want the to show 'index 4 - class index 3'.

Any ideas?

$('.showindex').click(function() {
  var index = $(this).closest("li").index();
  console.log("index " + index + " - class index " + "?");
});

.blue {
  color: blue;
}




  showindex blue
  showindex
  showindex blue
  showindex
  showindex blue

user_519413 · Answer

To achieve this you can select all .blue elements and provide the current element as an argument to find its index within that collection.

Note that the last button will show its 'class index' as 2 because indexes are zero-based in JS. Try this:

let $blues = $('li:has(.showindex.blue)');

$('.showindex').click(function() {
  let $li = $(this).closest('li');
  let index = $li.index();
  let classIndex = $blues.index($li);
  
  console.log(`index ${index}, class index ${classIndex}`);
});

.blue {
  color: blue;
}




  showindex blue
  showindex
  showindex blue
  showindex
  showindex blue/li>

How to get the index of clicked element by class?

1 Answers