Assuming I have a div that looks like:

<div id="testDiv">some stuff in here</div>

and I have a script that defines an object literal:

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: this.testDiv    
};

Why is it when I access testObject.testDiv I get a reference to a jQuery object, i.e.,

[<div id=​"testDiv">​…​</div>​]

but when I access testObject.testDivProperty I get a reference to the actual element, i.e.,

<div id=​"testDiv">​…​</div>​

and hence am not able to perform jQuery operations on testObject.testDivProperty?

Assuming I have a div that looks like:

<div id="testDiv">some stuff in here</div>

and I have a script that defines an object literal:

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: this.testDiv    
};

Why is it when I access testObject.testDiv I get a reference to a jQuery object, i.e.,

[<div id=​"testDiv">​…​</div>​]

but when I access testObject.testDivProperty I get a reference to the actual element, i.e.,

<div id=​"testDiv">​…​</div>​

and hence am not able to perform jQuery operations on testObject.testDivProperty?

• javascript
• jquery

Share Improve this question Follow edited Oct 2, 2013 at 11:52 André Dion 21.8k77 gold badges5858 silver badges6060 bronze badges asked Oct 2, 2013 at 11:42 x1886xx1886x 1,22722 gold badges1212 silver badges2121 bronze badges 10

• You can perform jQuery operations on it, but it means wrapping it again - $(testObject.testDivProperty);. I'm just menting though. I'm as curious about this as you are :) – Reinstate Monica Cellio Commented Oct 2, 2013 at 11:45
• Personally on Chrome I get undefined when querying testObject.testDivProperty (tested using body instead of #testDiv). – h2ooooooo Commented Oct 2, 2013 at 11:46
• 1 I just tested in Chrome, using the above code, and got the same result as the OP. – Reinstate Monica Cellio Commented Oct 2, 2013 at 11:47
• This is the expected result, but I'm not really sure why exactly the jQuery element is unwrapped? -> jsfiddle/CQw5v – adeneo Commented Oct 2, 2013 at 11:49
• 1 this is the window object, and this.testDiv references the native DOM element as it's attached to the window in some browsers. – adeneo Commented Oct 2, 2013 at 11:52

 |  Show 5 more ments

6 Answers 6

Sorted by: Reset to default 3

Trying to refer to the object you're defining as this during object instantiation doesn't work like you're expecting it to.

this in your example actually refers to the window object. Some browsers (e.g., Chrome and IE) will attach named DOM nodes to the document and/or window objects, which is why this.testDiv refers to the element with id="testDiv". It just so happens the property name you're trying to access has the same value as the element ID.

To demonstrate what's really going on, try this:

<div id="test"></div>

var myObj = {
    prop1: $('#test'),
    prop2: this.prop1
};

this.prop1 in the context of myObj should be undefined, but window.test may (depending on the browser) refer to the DOM node <div id="test"></div>.

Given your example, you could do your assignment as follows:

var myObj = { prop1: $('#test') };
myObj.prop2 = myObj.prop1;

or

var test = $('#test');
var myObj = {
    prop1: test,
    prop2: test
};

This cannot work. this is window in this context.

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: this.testDiv // window.testDiv

}

After some playing around I found the answer. At the time that you create the 2nd property, this refers to window, where you have a div with the id of testDiv.

So you're actually doing this...

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: window.testDiv    
}

I personally wasn't aware that you could do this, but window.testDiv returns the DOM element with the ID testDiv.

As mentioned already, this refers to the global window object.

The reason this.testDiv refers to the DOM element is because of a standard behavior in web browsers to add a global references to every DOM element with an id. The references are added as the elements are parsed, so your script code must be located below the element to reference.

Whether to rely on these references or not is another discussion.

Actually, in first case getting the jQuery object is obvious and should be understood (as you used '$'). In the second case, you get reference to a simple DOM node(object) because of these reasons-

- You didn't use jQuery anywhere in it, so don't expect it to be a jQuery object.

- You accessed this.testDiv meaning that - give me the property named "testDiv" of the current node(which is being accessed) Now if you have written this code in the <body> tag then this should point to the node/object(in DOM) of body element. I am not sure on this part but, somehow your 'testDiv' object was registered as a property in the body object(maybe because you used an "id" attribute for this element, thus making it unique). Thus, when you tried getting the object using this.testDiv you got the exact object for the <div> element in the DOM. And, javascript by default gives you a simple reference to the DOM/javascript object(not the jQuery object).

Apart from this, jQuery objects can be thought of as a coating over the normal javascript/DOM objects. It was not part of the question but still if you want to access as a jQuery object then,

To convert javascript object Obj to jQuery object, do this Obj=$(Obj);

The new Obj will be a jQuery object.

let object = $('#someId') -- jQueryObject

accesing any custom object field

object[0].anyProp = 'anyValue'

console.log(object) -- jQuery object
console.log(object[0]) -- Raw JS object
console.log(object[0].anyProp) -- Raw JS object prop