How to use JQuery index() method

Question

What am I missing regarding JQuery's index() method. Based on the documentation, I would expect to be alerted a value of 1 here:

HTML

<div class="test" id="div1"></div>
<div class="test" id="div2"></div>

JS

$(document).ready(function(){
    var index = $('.test').index('#div2');
    alert(index);
});

Here's a fiddle: http://jsfiddle.net/cpody1cb/

Why am I alerted -1? If I instead use index('#div1'), I am alerted 0, as I would expect.

The documentation says 'If we use a string as the .index() method's argument, it is interpreted as a jQuery selector string. The first element among the object's matched elements which also matches this selector is located.' I still don't understand why what I'm doing doesn't work. — flyingL123
– flyingL123, Commented Nov 20, 2014 at 22:03

isherwood · Accepted Answer · 2014-11-20 22:02:26Z

2

You're trying too hard.

var index = $('#div2').index();

To explain why yours doesn't work, you simply have the selectors backward. The argument for the index() method should be a selector that gets the set of elements, not the element for which you want the index. This would be done like so:

var index = $('#div2').index('.test');

answered Nov 20, 2014 at 22:02

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Cheery Over a year ago

Are you sure that he wants index of element in page and not index in selection?

flyingL123 Over a year ago

I want the index in a selection, not on page.

flyingL123 Over a year ago

Based on the documentation I still don't understand why what I'm doing doesn't work. It says "If we use a string as the .index() method's argument, it is interpreted as a jQuery selector string. The first element among the object's matched elements which also matches this selector is located."

Scott Selby Over a year ago

the jquery docs actually says the opposite , I see why OP is confused , look from docs : var index = $("div").index(this); this meaning the element clicked. "div" is the collection , and this is the specific one to get the index of

Scott Selby Over a year ago

@flyingL123 - personally I have never needed .index() ever , and I have made many many many sites with complex jquery . So personally I would recommend to not use it , because this looks like a bug in the docs , or in the code and it may be changed some day. There are so many other ways to accomplish whatever you need the index for

|

PeterKA · Accepted Answer · 2014-11-20 22:01:20Z

0

Since the indexes are zero-based you should get 1

$(document).ready(function(){
    var index = $('.test').index( $('#div2') );
    alert(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test" id="div1"></div>
<div class="test" id="div2"></div>

answered Nov 20, 2014 at 22:01

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

user400654 · Accepted Answer · 2014-11-20 22:04:51Z

0

.index() can only work on one element, so it starts by reducing the set of selected elements to only the first one, which explains why you get 0 when you use #div1 and -1 when you use #div2. You should be selecting the div you want the index of, and then giving it a selector to tell it where to look for the element.

$('#div2').index('.test')

answered Nov 20, 2014 at 22:04

user400654

95.1k16 gold badges168 silver badges188 bronze badges

1 Comment

Scott Selby Over a year ago

That is not the way it is explained in the doc's , I see why OP is confused they say var index = $("li").index(listItemClicked) , so "li" is the collection , and itemClicked is the element you want the index of , your example works , but it opposite the way the offical docs say to do it

Collectives™ on Stack Overflow

How to use JQuery index() method

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related