Question

So I have a div with some child elements and when I select one with jQuery I want to get the index of it within a selector

<div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="red"></div>
</div>

So lets say that I have the last element in the main div selected. If I call index() on it it will give me ‘7’ because out of all the child elements the index is ‘7’. But now lets say I want to get the index based on the other ‘red’ elements, the goal is to return a value of ‘4’ because out of all of the ‘red’ elements it is the fifth one. I looked through the documentation and didnt find a whole lot, then I experimented with putting selectors in the index() method like index(‘.red’) but I couldn’t get anything working.

Answer 1

Well, the documentation says:

.index( element )
element The DOM element or first element within the jQuery object to look for.

So can do:

selectedElements.filter('.red').index(this);

If you don’t have selectedElements already, you can select corresponding siblings with, for example:

$(this).parent().children('.red')

If every element has only one class and then the filter can be dynamic:

var index = $(this).parent().children('.' + this.className).index(this);