Jquery Index function with selector string

Question

As I know from Jquery learning, function index of jquery can be used:

.index() // no arguments
.index(domObject) // argument is a dom object
.index(JqueryObject) // argument is a Jquery object
.index("selectorString") // argument is a selector string

I'm testing index function with argument is a selector string.

html -> body:

<div class="name" id="id1">
  <h2>Z</h2>
  <h2>X</h2>
</div>
<div class="name" id="id2">
  <h2>A</h2>
  <h2>B</h2>
</div>

Jquery scripts:

var index1 = $('.name').index("#id1");
var index2 = $('.name').index("#id2");
alert(index1);
alert(index2);

The results are: 0 for index1 (correct) and -1 for index2 (not correct).

So, The question is: Why I can not get the correct index value of div#id2?

jsfiddle: http://jsfiddle.net/GhPxD/60/

swap it $("#id2").index('.name');, that gets the index of #id2 in the .name collection — adeneo
– adeneo, Commented Jan 6, 2015 at 10:18

Denys Séguret · Accepted Answer · 2015-01-06 10:27:57Z

3

There's no bug here, the API is just... strange. Here's the documentation :

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -1.

What you want is thus

$('#id2').index(".name");

Having this function behave in so different ways is very confusing IMO.

edited Jan 6, 2015 at 10:27

answered Jan 6, 2015 at 10:21

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

2 Comments

Chinh Phan Over a year ago

Basically, you are correct. $('#id2').index(".name"); and $('#id1').index(".name"); return the correct result and it seems that is the way of using index function with selector string argument. But one more thing can you explain: why $('.name').index("#id1"); return the correct index? Is it accidentally correct?

Denys Séguret Over a year ago

The first .name element is #id1. So the index of the first .name element in the set #id1 is 0. Yes, that's accidentally correct. I'm not sure many developers can correctly use the index function with arguments at first try...

Milind Anantwar · Accepted Answer · 2015-01-06 10:17:40Z

0

You can pass jquery object in index method to make this work:

var index = $('.name').index($("#id2"));

Working Demo

answered Jan 6, 2015 at 10:17

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

Rory McCrossan Over a year ago

It appears the documentation is wrong as this does indeed work, yet the docs state a string selector can be provided. It could also be a bug in jQuery itself.

Chinh Phan Over a year ago

What you did is using the 3nd method I mention above: .index(JqueryObject) // argument is a Jquery object

Anant Dabhi · Accepted Answer · 2015-01-06 10:37:51Z

-1

statement 1 :  var index1 = $('.name').index("#id1");
statement 2 :  var index2 = $('.name').index("#id2");

statement 1 1.As you know when you use any selector in jquery it return first matching element 2. now you try to find index of index("#id1") so it found sucessfully at index 0 so it return 0

statement 2 1.As you know when you use any selector in jquery it return first matching element 2. now you try to find index of index("#id2") so it unable to found any child element with #id2 so it reurn -1

edited Jan 6, 2015 at 10:37

answered Jan 6, 2015 at 10:27

Anant Dabhi

11.2k3 gold badges33 silver badges51 bronze badges

1 Comment

Chinh Phan Over a year ago

Sorry, I dont think you are correct at this statement "when you use any selector in jquery it return first matching element". $('.name') return a Jquery object with 2 doms inside it (div#id1 and div#id2)

Collectives™ on Stack Overflow

Jquery Index function with selector string

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related