更改jquery选择范围

Question

When I am writing a jQuery selectors within a specific-page javascript, I'd like to be able to use a simplified (scoped) selection mechanism.

To reference the element currently I need to use the full selector:

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

Since the code line above is used within a home-view backing js file, I'd like to be able to do something like this:

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

Is there a possibility to do something to address the code-location specific selections?

Answer 1

Simply modify the default jQuery init function so that the context is the one chosen by you:

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'));

Explanation:

jQuery.noConflict();

This line prevent jQuery's default assign to $ .

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

Assign to $ the new modified function that will return a new jQuery instance with the context modified for your purposes(this is the clue of the script)!

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

Creates a new property fn to the $ function, and assign it to the prototype inheriting properties from jQuery.fn .

jQuery.extend($, jQuery);

Extends the created object with jQuery functions, so you can use it exactly as jQuery.

See a working fiddle of this snippet.

Answer 2

You could use something like this:

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

I suppose you need genericity on your generic sections, otherwise you would not ask.

So a generic code could call $('#selector') without being aware of the context.

The simplest way: use a custom function $$

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

In your generic sections use $$('#selector') instead of $('#selector')

Around your generic code execution use:

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

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

$$.pop();

With this custom function, you can nest contexts and even use the $$(selector, localcontext) form. Thus for the generic code, the current global context is totally transparent.