javascript - 更改 jquery 选择范围

Question

当我在特定页面 javascript 中编写 jQuery 选择器时，我希望能够使用简化的（范围）选择机制。

要引用当前的元素，我需要使用完整的选择器：

$('#home-view #events-cloud')'

由于上面的代码行在主视图支持 js 文件中使用，我希望能够执行以下操作：

$.SetSelectorPrefix('#home-view');
$('#events-cloud');

是否有可能做一些事情来解决代码位置特定的选择？

Answer 1

只需修改默认的 jQuery init 函数，以便上下文是您选择的上下文：

jQuery.noConflict();
$ = function (selector, context) {
    return new jQuery.fn.init(selector, context || document.getElementById('home-view'));
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery);
console.log($('#events-cloud'));

解释：

jQuery.noConflict();

此行阻止 jQuery 的默认分配给$.

$ = function (selector, context) {
    return new jQuery.fn.init(selector, context || document.getElementById('wrapper'));
};

分配给$新的修改函数，该函数将返回一个新的 jQuery 实例，并为您的目的修改了上下文（这是脚本的线索）！

$.fn = $.prototype = jQuery.fn;

fn为函数创建一个新属性$，并将其分配给从 继承属性的原型jQuery.fn。

jQuery.extend($, jQuery);

使用 jQuery 函数扩展创建的对象，因此您可以完全像 jQuery 一样使用它。

请参阅此片段的工作小提琴。

Answer 2

你可以使用这样的东西：

var container = $('#home-view');
// Will only search elements within #home-view
container.find('#events-cloud');
// Changing container
container = $('#main-view');
// Will only search elements within #main-view
container.find('anotherSelector');

Answer 3

我想您需要通用部分的通用性，否则您不会问。

因此，通用代码可以$('#selector')在不知道上下文的情况下调用。

最简单的方法：使用自定义函数 $$

function $$(selector, context) {
    return $(selector, context ? $(context, $$.stack[0]) : $$.stack[0]);
}
$$.stack = [];
$$.push = function(context){ $$.stack.unshift(context); }
$$.pop = function(){ return $$.stack.shift(); }

在您的通用部分中使用$$('#selector')而不是$('#selector')

围绕您的通用代码执行使用：

$$.push('#home-view');

// generic code call using $$
// e.g. $$('#events-cloud') <=> $('#events-cloud', '#home-view') <=> $('#home-view #events-cloud')

$$.pop();

使用此自定义函数，您可以嵌套上下文甚至使用$$(selector, localcontext)表单。因此对于通用代码，当前的全局上下文是完全透明的。