CODEWITHSUNDEEP
javascriptdomjquery
Mechlar
Mechlar

Reputation: 4984

Detect DOM object vs. jQuery Object

I have a function that I want to be able to allow passing in either a regular javascript DOM element object or a jQuery object. If its not yet a jQuery object I will then make it one.

Does anyone know of a very reliable way to detect this.

function functionName(elm){
   //Detect if elm is not a jquery object in condition
   if (elm) elm = $(elm);

}

A logical approach is to detect one of the properties of the DOM element object. The question is, which property would be the most reliable to detect?

I could also just make it a jquery object either way since jQuery doesn't have a problem with something like: $($imajQueryObjAlready); However, the purpose of this question is not to just solve the problem, but to find a good way to detect if its a DOM object vs. a jQuery object.

Upvotes: 31

Views: 8240

Answers (6)

Bob Stein
Bob Stein

Reputation: 17254

The classy way:

function is_jquery_object(x) {
    return window.jQuery && x instanceof jQuery;
}

function is_dom_object(x) {
    return window.HTMLElement && x instanceof HTMLElement;
}

Building on @karim79's answer, if you need to be sure it's either a DOM or jQuery object, use these tests. (The window test helps the function fail gracefully if the class is not defined, e.g. jQuery failed to load.)

Upvotes: 0

Han Seoul-Oh
Han Seoul-Oh

Reputation: 1296

elm instanceof jQuery is the most foolproof way, as testing elm.nodeType would mistake {nodeType:1} for a DOM element, and testing elm.jquery would mistake {jquery:$()} for a jQuery object, in addition to there being no guarantee future jQuery objects won't have a jquery property.

Upvotes: 6

Zack Bloom
Zack Bloom

Reputation: 8427

The easiest way is to simply pass it into the jQuery function either way. If it's already a jQuery object, it will return it unchanged:

function(elem){
   elem = $(elem);
   ...
}

From the jQuery source code, this is what's happening:

if (selector.selector !== undefined) {
    this.selector = selector.selector;
    this.context = selector.context;
}

return jQuery.makeArray( selector, this );

Where makeArray is merging the new (default) jQuery object with the passed in one.

Upvotes: 7

karim79
karim79

Reputation: 342765

To test for a jQuery object, you can use the instanceof operator:

if(elm instanceof jQuery) {
    ...
}

or:

if(elm instanceof $) {
    ...
}

Upvotes: 13

AndreKR
AndreKR

Reputation: 33697

jQuery does it like this:

if ( selector.nodeType )

(jQuery 1.4.3, line 109)

Upvotes: 8

user113716
user113716

Reputation: 322592

To test for a DOM element, you can check its nodeType property:

if( elm.nodeType ) {
    // Was a DOM node
}

or you could check the jQuery property:

if( elm.jquery ) {
    // Was a jQuery object
}

Upvotes: 60

Related Questions