Resolved jQuery('#elemID') != document.getElementById('elemID')

[WolfShade]

Hey, everyone.

Help me to understand something.

I have a function that will take all the spans with a certain class ("jobStatus") and remove an additional class from it ("orange"). I call the function from a SELECT onchange (onchange="chgJobstatus(this);"). It's working great.

However, I'm trying to get it to run on page load, based upon the selected value (this is server-side dynamically generated.)

This will work:

$(document).ready(function(){
  chgJobstatus(document.getElementById("chgStatus"));
});

This will NOT work:

$(document).ready(function(){
  chgJobstatus(jQuery('#chgStatus'));
});

Doesn't jQuery('#id') do the same thing as document.getElementById('#id') ??

Thank you,

[VIPStephan]

document.getElementById() returns a DOM node and jQuery('#id') (or $('#id')) returns a jQuery object. I’m not JS guru enough to fully understand and explain that myself but you can turn a jQuery object into a DOM node by writing $('#id')[0] (the first item in the array of the object’s properties is the DOM node) and a DOM node into a jQuery object by wrapping it with the jQuery default function (jQuery(domNodeHere) or $(domNodeHere), respectively).

[WolfShade]

Since chgStatus is a select and the only node with that ID, all I have to do is append [0] to it, like so:

$(document).ready(function(){
 chgJobstatus(jQuery('#chgStatus')[0]); 
});

?

[WolfShade]

Worked like a charm.

Thanks, VIPStephan!

(I tried adding to your reputation, but it wouldn't let me.)