javascript - 将 jQuery 选择器限制为特定元素的子元素

Question

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

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

(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);
}

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

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

(new $) = selection inside `.my_app_class`

($$) = (old $)

谢谢!

Answer 1

您正在尝试的维护工作有点头疼。如果其他人拿起你的代码，他们会非常困惑，试图在头脑中将 jQuery 语法转换成你想要它做的事情。

如果您改为将代码编写为简单的 jQuery 插件，应用于适当的类。然后:

1) 你会发现它们自然而然地只应用于相关元素，而无需 hack jQuery 本身和

2) 您突然有了将它们应用于动态加载内容的范围(再次基于类，但这次是在加载的内容中)。

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