Question

I need to be able to dynamically determine what the index of a certain div inside another div is. For example:

<div id="parent">
    <div id="div-0"></div>
    <div id="div-5"></div>
    <div id="div-1"></div>
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div id="div-4"></div>
</div>

For any of those I need to be able to know if a given div is the first, second etc…

EDIT:
Ok obviously I haven’t explained this well. I tried all of the below and all I get is 0 every time. I have edited the example above to reflect what is happening. So given the updated example what I need to be able to do is the following:

var index = $('#div-4').index();

Currently this is only returning 0 every time.

Answer 1

playground

   $('#parent div').on('click',function(){     
      var elIndex = $(this).index();      
      $(this).text('my index is: '+ elIndex);     
   });

http://api.jquery.com/index/

---

Good to know that in jQuery v lower that 1.3.3 .index() will not work,
in that cases you can use .prevAll() and length:

var elIndex = $(this).prevAll().length;

This technique is specially useful if you have more than one class name as children, e.g. inside a DIV you have:

<div id="parent">
    <div class="aa"></div>
    <div class="bb"></div>
    <div class="aa"></div>
    <div class="bb"></div>
</div>

… and clicking on a ‘.aa’ element you want to get it’s ‘index’ than it would be something like:

$('#parent .aa').click(function(){  
  var elIndex = $(this).prevAll('.aa');  
  $(this).text('my index type of class name is: '+ elIndex);
});