Question

I have the following DOM structure:

/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>

Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:

// works
var result = $('#testDiv')[0];
alert(result.id);

// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);

I tried selecting id instead of class and got the same results.

My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?

Thanks.

EDIT: Ok this is the official “does not work” version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.

UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.

UPDATE2: I have changed the html back to what it used to look like. I’m using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I’m trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it’ll be span or div, but couldnt get out of it to do the second select. I’ve replaced jQuery.js and jsTestDriver.jar to no avail.

Thanks.

Answer 1

What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.

Not sure whether this is a patch or ugly fix, but it solved my problem for now.

Thanks for all the help!