Question

Let’s say I have this HTML:

<div>

  <div class="ClassA"></div>
  <div class="ClassX"></div>
  <div class="ClassB"></div>
  <div class="ClassC"></div>
  <div class="ClassX"></div>
  <div class="ClassA"></div>
  <div class="ClassX"></div>

</div>

I’m looking to get the order of ClassX when I click on it. For instance, if I click on the first ClassX, it should return 1 and if I click on the second ClassX it should return 2.

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

  var TheOrder = 0;

  //code here for TheOrder

  alert(TheOrder);

});

Answer 1

Use .index with a selector:

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

  var TheOrder = $(this).index(".ClassX") + 1; // index is 0-based.

  alert(TheOrder);

});

Example: http://jsfiddle.net/kykWr/