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

Question

我有一系列通过 Javascript 嵌入到各种页面中的应用程序，因此在构建 select 或以不' 不小心 select 父页面上的东西。（我无法控制父标记，并且 iframe 不是一个选项。）

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

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

}(window.jQuery));

虽然我很擅长始终记得在我的 jQ select 前面加上 "my_app_class"，但如果 $ 中隐含了这一点，我会更舒服。本质上，我想：

$(".headline")

永远相等：

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

最简单的方法是这样的：

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

但是我想在我确实需要在父页面上创建一个 selection 的情况下维护一个超级函数（这种情况时常发生）。我也不想覆盖 jQuery 的其他用途，例如 $.ajax.

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

(new $) = selection inside `.my_app_class`

($$) = (old $)

谢谢！

Answer 1

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

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

1) 您会发现它们自然会只应用于相关元素，而不会破坏 jQuery 本身和

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

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

Limit jQuery selectors to children of a certain element