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。

查看此代码段的working fiddle。

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)表单。因此，对于通用代码，当前的全局上下文是完全透明的。

更改jquery选择范围

3 个答案:

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