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/

Answer 1

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.