I'm working in a mixed environment of prototype/scriptaculous and jQuery. Not my implementation, but now it's my problem: I'm working to remove prototype/scriptaculous everywhere and replace both with vanillaJS as time permits.
In the meantime, let us say I have a DOM element, jQuery'd like this:
$("#myElement")
Is it possible to get the jQuery object from this so I don't have to pass '$' from function to function as an extra parameter? e.g.:
function foo($) {
const myElement = $("#myElement");
...do some stuff to myElement here...
bar(myElement);
}
function bar(myElementIn) {
const $ = {somehow get the jQuery object from myElementIn};
...do more stuff with other elements related to myElementIn...
}
Longshot, I'm sure, but figured it was worth asking.
You can use Object.getPrototypeOf to get the prototype of jQuery and .constructor to then get jQuery.
const myElementIn = $(/* ... */);
console.log(Object.getPrototypeOf(myElementIn).constructor === $);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>To get the DOM element you can use the jQuery .get() method https://api.jquery.com/get/
For example using your ID selector: const myElement = $("#myElement").get()
If you just want the first one in a set const myElement = $(".my-class").get(0);
You can also do as you have noted by creating a cached object. Examples:
const myElement = $("#myElement");
myElement.html("<div>new html</div>");
myElement.append("<button>New Button text</button>");
myelement.find('span').trigger('click');
doMoreFunction(myElement);
function doMoreFunction(jqEl){
jqEl.find('button').text("Updated Button Text");
}
Here is another example: Setup: you have a document which includes an <iframe> (both on the same domain) and you want to call jQuery on the parent window (assume here for our demonstration it is the TOP window in case you have nested iframes)
OK now that we have some "basics" out of the way, here is an example to actually get a reference to jQuery (a bit hacky) within a function that is passed a jQuery object.
var mybody = jQuery('body')
.append('<div id="my-new-thing">I append to the top window DOM</div>');
//This assumes the top window has jQuery referenced in it via a script element for example
const newThing = jQuery('#my-new-thing');
newThing.append('<span>New Span For our element</span>');
// console.log(newThing);// commented out as too long for here :)
console.log(newThing.constructor);
console.log(newThing.constructor == jQuery); // logs true
function testMe(me) {
console.log(me.constructor == jQuery);
let jq = me.constructor;
jq(me.get(0)).append("<span> More New</span>");
}
testMe(newThing);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>