2

Possible Duplicate:
document.getElementById vs jQuery

More jQuery newbieisms to inflict on you folks...

I have some code that is using jQuery more or less happily. My confusion is that, in one case, I get my hands on an identifier which is the ID of a div on the page. I expect that $(theIdentifier) will get its hands on the object, but it doesn't; console.log returns 'undefined'. However, document.getElementById(theIdentifier) succeeds -- it returns the thing I'm looking for, and further operations on the div work as expected.

What's up here? Shouldn't they be identical? Why isn't the jQuery version working?

Puzzled, obviously; thanks for any advice!

Community
  • 1
  • 1
Jim Miller
  • 3,291
  • 4
  • 39
  • 57

4 Answers4

6

The argument to "$()" has to be a selector:

var $thing = $("#" + thingId);

That's almost the same as calling "getElementById()". The difference is that the latter will only care about "id" values (except in IE, see below), while the jQuery selector-based code will pay attention to embedded CSS metacharacters. Thus, if you've got an "id" value with a "." in it, like this:

var foo = $('#thing.special');

then that will look for an element with id "thing" and class "special", instead of an element with the id "thing.special".

The thing with IE: for reasons known only to some mysterious developers at Microsoft, the "getElementById()" code in IE will return elements whose "name" attribute matches the argument. That behavior is not dependent on the presence of an element with the same "id" value; I think it returns the first one it finds in the DOM. (I don't know about IE9 in this regard.)

Note — a comment mentions correctly that the "$()" function can take a variety of different types of arguments, resulting in a variety of effects. When I said it "has to be a selector", I was referring to its use with string-valued arguments.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • @pointy why the $ in the var name ? – mcgrailm Apr 22 '11 at 15:25
  • @mcgrailm: Some use this convention for variables that contain jQuery objects. –  Apr 22 '11 at 15:26
  • @mcgrailm it's a convention, to make it easy to keep track of variables that hold jQuery objects from those that don't. I'm of two minds about the practice, but it can be handy esp. in cases where you really want to minimize redundant jQuery calls. – Pointy Apr 22 '11 at 15:27
  • 1
    no, the argument to `$()` can also be an HTMLElement object – Alnitak Apr 22 '11 at 15:28
  • @Alnitak yes of course you're right; I was writing in the context of the original question, but I'll clarify. Thanks! – Pointy Apr 22 '11 at 15:29
  • ARRRRRGGGGGGGGGGHHHHHHHHHHHHHH!!!!! Of course. I suck. This is what I get for coding before my coffee kicks in. Thanks much; sorry to have bothered you all. You may now get back to more important/substantive things. – Jim Miller Apr 22 '11 at 15:43
1

you need $('#'+theIdentifier) to get by ID always have # at the beginning.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
0

$ accepts a CSS selector, not an Identifier so it's :

$('#' + identifier)
BiAiB
  • 12,932
  • 10
  • 43
  • 63
0
var el = document.getElementById('foo')
$(el)...

is equivalent to:

$('#foo')...
Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • Not exactly. getElementByID returns the actual DOM object. $("#foo") returns a jquery object containing the DOM. To get the actual DOM object (in case you need to manipulate it using non jquery methods like innerHTML=) you need to use $("#foo")[0]. – l85m Jul 12 '14 at 19:15
  • @Demosophy you've misread what I wrote - I was saying that `$(document.getElementById('foo'))` is the same as `$('#foo')`. Consider `el` as a temporary variable that's not otherwise used. – Alnitak Jul 12 '14 at 21:57