将 jQuery 选择器限制为某个元素的子元素

Question

我有一系列通过 Javascript 嵌入到各种页面中的应用程序，因此在构建选择器时要尽可能小心，以免意外选择父页面上的某些内容。 （我无法控制父标记，并且 iframe 不是一个选项。）

父页面都在.noConflict() 模式下使用jQuery，我的应用程序始终位于div 中，类为my_app_class

(function($) {
    var el = $(".my_app_class"); //my code

}(window.jQuery));

虽然我总是记得在我的 jQ 选择器前面加上“my_app_class”，但如果这在 $ 中隐含，我会更舒服。本质上，我想：

$(".headline")

永远相等：

$(el).find(".headline")

天真的方法是这样的：

$ = function(selector) {
    return jQuery(el).find(selector);
}

但我想在我确实需要在父页面上进行选择的情况下维护一个超级功能（这确实会不时发生）。我也不想覆盖 jQuery 的其他用途，例如 $.ajax。

最好的方法是给函数起别名并保持原来的状态？我想要这样的东西

(new $) = selection inside `.my_app_class`

($$) = (old $)

谢谢！

Answer 1

您正在尝试的是有点令人头疼的维护问题。如果其他人拿起你的代码，他们会很困惑地试图将 jQuery 语法转换成你想要的。

如果您将代码编写为简单的 jQuery 插件，应用到适当的类。那么：

1) 你会发现它们自然只适用于相关的元素，而不需要破解 jQuery 本身和

2) 您突然有了将它们应用于动态加载内容的空间（同样基于类，但这次是在加载的内容中）。

有许多模型可以将代码编写为插件。一个简单的就是 jQueryUI $.widget