UPDATED: Getting the index of a child div using jQuery

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.

possible duplicate of [jQuery: Get index of element as child relative to parent](http://stackoverflow.com/questions/4996002/jquery-get-index-of-element-as-child-relative-to-parent) ... have you actually [searched SO](http://stackoverflow.com/search?q=jquery+get+index+of+element)? — Felix Kling, Mar 03 '12 at 15:43
It's fun imagining use cases for this, such as paragraph numbers or dynamic "that's what `she` said" statements. — Thomas L Holaday, Mar 03 '12 at 15:44
Regarding your update: Then your HTML is different than what you claim it is. It works fine here: http://jsfiddle.net/sHKHS/ — Felix Kling, Mar 03 '12 at 16:03
Are the elements in question actually *direct siblings*, or are they nested more deeply inside ancestors that are siblings? — , Mar 03 '12 at 16:44

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

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);
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 03 '12 at 15:47

Roko C. Buljan

196,159
39
305
313

See the updated example above. None of this works in my situation. Each instance is returning 0. – Josh Scott Mar 03 '12 at 16:24
@resonantmedia: I already commented on your question that `$('#div-4').index()` works with the given HTML (see my demo). Maybe you have another element with ID `div-4`. – Felix Kling Mar 03 '12 at 16:42
The issue is I am not clicking the div I am clicking a button on the div. The div has an id like this. button-1 that corresponds to the div whose index I want. Here is an example: http://jsbin.com/evisub/edit#javascript,html – Josh Scott Mar 03 '12 at 17:26
@resonantmedia your HTML is not good! you have two extra `` closing tags! and I can see no `#button-1` element. You have to use .parent() or .parents('parent element here') to find the most up-in-the-tree parent that could have a indexation. E.g. a button inside a element has an index of '0'. but it's parent elements have indexes cause they're many inside a grand-parent. Am I clear? :) – Roko C. Buljan Mar 03 '12 at 17:44
I quickly hacked together a simplified example of where the button was placed. Let me try to use parent() to get to the right place. – Josh Scott Mar 03 '12 at 18:11

score 0 · Answer 2 · answered Mar 03 '12 at 15:47

0

As am not i am notes in comment:

index()

Return Values

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

answered Mar 03 '12 at 15:47

Thomas L Holaday

13,614
6
40
51

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

You can use index as @amnotiam said (best way). And you can make manipulation using it or even one of thoses:

First, nth-child, closest or eq.

edited May 23 '17 at 11:59

Community

1
1

answered Mar 03 '12 at 15:50

Michel Ayres

5,891
10
63
97

UPDATED: Getting the index of a child div using jQuery

3 Answers3

playground