I've got a series of apps that are embedded via Javascript in a variety of pages, so it's important to be as careful as possible about constructing selectors in a way that don't accidentally select something on the parent page. (I have no control over the parent markup, and iframes are not an option.)
The parent pages all use jQuery in .noConflict()
mode, and my app always lives inside a div
with the class my_app_class
(function($) {
var el = $(".my_app_class"); //my code
}(window.jQuery));
While I'm pretty good about always remembering to prepend my jQ selectors with "my_app_class", I would be more comfortable if that was implicit in $
. Essentially, I would like:
$(".headline")
To always equal:
$(el).find(".headline")
The naïve way to do this would be like this:
$ = function(selector) {
return jQuery(el).find(selector);
}
But I would like to maintain a super function for situations when I really do need to make a selection on the parent page (which does happen from time to time). I also don't want to overwrite other uses of jQuery like $.ajax
.
What's the best was to alias a function and maintain the original? I want something like this
(new $) = selection inside `.my_app_class`
($$) = (old $)
Thanks!