Question

it appears that

$(html).find('*').index('#theID');

yields -1 whereas

$(html).find('*').each(function(ind){if(this.id=='theID') alert('found! @'+ind) } );

does work (alerting 229)

I am using Windows 7 with IE 8 and jquery 1.6.1

My question is, why doesn’t the first one work? Thanks.

Answer 1

Look at the jQuery documentation for index. The API for a string argument is as follows (italic emphasis added):

selector A selector representing a jQuery collection in which to look
for an element.

…

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

To do what you are trying to do requires you to pass an element (or jQuery object) as the argument, not a string. Therefore, something like this should do what you want:

$(html).find("*").index($("#theID", html));

Edit (see comments)

Since html is a string, creating 2 different jQuery objects from that string is going to cause problems. To solve that, you can pass it into jQuery once:

var $html = $(html);
$html.find("*").index($html.find("#theID"));

---

The documentation for this form of index states the following:

element The DOM element or first element within the jQuery object to
look for.

…

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.