How can I insert a prefix for all jQuery selectors?

Question

I need extended main jQuery function to insert a prefix before any selector passed to it.

For example

jQuery.prefix = '#newBody ';
jQuery('.content')

would be the same as

jQuery('#newBody .content')

I tried running this code

window.oldJquery = jQuery;
window.jQuery = window.$ = function( selector, context) {
    console.log('+',selector);
    return oldJquery(selector, context );
}

But I last jQuery object.

**

Without changes in the current code

**

Answer 1

I'm not aware of a functionality like that in jQuery, but you could use find

jQuery('#newBody').find('.content')

You could wrap it in a function and call that function too:

function my$(selector) {
  return jQuery('#newBody').find(selector);
}

usage:

my$('.content');

Answer 2

I would suggest creating a wrapper method. Simply create a small method that takes in a selector, and passes the prefix plus the selector into jQuery and returns the result.

Example:

var prefix = '#newBody';

function jqPrefix(selector)
{
  return jQuery(prefix + ' ' + selector);
}

You would then call jqPrefix('.content') instead of jQuery('.content') .

Answer 3

There are a few ways you could do this without being destructive (as you currently are). One way would be like the following:

var $prefix = jQuery('#newBody');
$prefix.find('.content');

Another way, probably a bit more resource consuming but stil non-destructive would be like the following.

var $Prefix = function(selectors) {
    return jQuery("#newBody " + selectors);
};

$Prefix(".content"); //jQuery("#newBody .content");

EDIT: If you wanted to replace all jQuery 's so that they're only children of a specific element, you can try the following. Essentially what we're doing is creating a new scope and redefining the jQuery variable as $Prefix (from the previous code snippet) so that you don't need to rewrite everything.

var $Prefix = function(selectors) {
    return jQuery("#newBody " + selectors);
};

(function(jQuery){

}($Prefix));

Answer 4

What you should do is update your code. You can do a find/replace with regular expressions like so:

find: /\$\('(.*?)'\)/ig
replace: $('#newSelector \1') OR $('\1', '#newSelector')

either of which will provide the correct context for your search.

Answer 5

You could use $.extend .

$.extend($.expr['#'],{
    newBody: function(a) {
        return true;
    }
});

See examples .

Answer 6

The easiest, safest and... well, clever way is to use a wrapper for the desired functionality, not to overwrite jQuery.
As stated in the other answers, you can make a wrapper that adds the prefix to the current selector ( such as jqPrefix ) or, you could make a wrapper for the selectors themselves :

var $$ = getSelector = function(){
    return '#id ' + s;
};

and instead of passing thet selector as simple string to jQuery, you can pass a getSelector function call with the selector as first argument :

$($$('.some-class'))

which translates to

$('#id .some-class')

Answer 7

I had this same sort of issue a week or two ago. What I did turned out to be tedious but worked just fine. It was pretty easy to verify that it was done correctly.

There will be code that looks like this:

$(something)...

You may have used jQuery instead of the $. Either way you have to search for it. No way around it. If you modify jQuery itself, you can make it work. JavascriptMVC did it in their Controller. I suspect it took them a long time to debug and verify that it worked and didn't break anything.

Put some code like this somewhere at the start:

var $prefix = $('#newBody ');

In each place where you find it, replace it with this code:

$(something, $prefix)...

Note that all you are doing is a text insert or paste in the editor which is pretty quick especially if your editor has the capability to search for the closing paren and leave the cursor right before it. In Eclipse you can use search and replacement strings with regular expressions. They would be these (there is a space after the comma in the replace string).

(\$\([^\)]+)\)
\1, \$prefix\)

Note that internally (in recent jQuery versions) this is exactly like:

$prefix.find(something)...

It worked for me, and I repeat, was not very hard to debug. Plus it didn't mess up any other jQuery calls.

There is some comment about this form of jQuery selector in this StackOverflow question