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

时间:2015-04-19 20:52:58

标签: javascript jquery jquery-selectors conflicting-libraries

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

父页面都以.noConflict()模式使用jQuery,而我的应用程序始终位于divmy_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 $)

谢谢!

1 个答案:

答案 0 :(得分:0)

你正在尝试的是一些维护问题。如果有其他人拿起你的代码,他们会在试图将jQuery语法精神转换为你想要它做的事情时会感到非常困惑。

如果您将代码编写为简单的jQuery插件,则应用于相应的类。然后:

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

2)你突然有空间将它们应用于动态加载的内容(同样基于类,但这次是在加载的内容中)。

有很多模型用于编写代码作为插件。一个简单的例子是jQueryUI $.widget