Access to jQuery selector as object property, unexpected result
Assuming I have a div that looks like this:
<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 when accessing 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 link to the actual element, i.e.
<div id="testDiv">…</div> and therefore I cannot perform jQuery operations on testObject.testDivProperty ?
Attempting to reference an object that you define as this at the time the object was created does not work as you expect.
this in your example actually refers to a window object. Some browsers (such as Chrome and IE) attach named DOM nodes to document and / or window objects, so this.testDiv refers to an element with id="testDiv" . It so happens that the name of the property you are trying to access has the same meaning as the identifier of the element.
To demonstrate what is happening, try the following:
<div id="test"></div> var myObj = { prop1: $('#test'), prop2: this.prop1 }; this.prop1 in the context of myObj must be undefined , but window.test may (depending on the browser) refer to the DOM node <div id="test"></div> .
Given your example, you can complete the following task as follows:
var myObj = { prop1: $('#test') }; myObj.prop2 = myObj.prop1; or
var test = $('#test'); var myObj = { prop1: test, prop2: test }; This will not work. this window in this context.
var testObject = { testDiv: $("#testDiv"), testDivProperty: this.testDiv // window.testDiv } After some games, I found the answer. While you are creating the second property, this refers to window , where you have a div with the identifier testDiv .
So you are actually doing this ...
var testObject = { testDiv: $("#testDiv"), testDivProperty: window.testDiv } I personally did not know that you can do this, but window.testDiv returns a DOM element with the identifier testDiv .
As already mentioned, this refers to the global window object.
The reason this.testDiv is related to the DOM element due to the standard behavior in web browsers to add global references to each DOM element with an identifier. Links are added as elements are analyzed, so your script code should be located below the element for the link.
Whether or not to rely on these links is another discussion.
Actually, in the first case, getting a jQuery object is obvious and should be understood (as you used " $ "). In the second case, you get a link to a simple DOM node (object) for these reasons -
- you did not use jQuery anywhere, so do not expect it to be jQuery.
- You got access to this.testDiv , which means that - give me a property called "testDiv" of the current node (accessed) Now, if you wrote this code in the <body> , then this should point to the node / object (in the DOM) of the body element. I'm not sure about this part, but somehow your testDiv object was registered as a property in the body object (perhaps because you used the id attribute for this element, which makes it unique). This way, when you tried to get 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 a DOM / javascript object (and not a jQuery object).
In addition, jQuery objects can be thought of as covering over regular javascript / DOM objects. This was not part of the question, but if you want to access as a jQuery object, then
To convert a javascript Obj object to a 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