I am writing a lot of code where I am using the same selectors but snippets of them for example

$('#menu > div.container a')

and

$('#menu span.highlight')

is there any method to have '#menu' in a variable and use that instead? The issue I have with string concatenation is that it requires one to be extremey disciplined about its use as even a single missing space will mess things up. What I would rather do is something like below:

var menuSelector = '#menu';
$('{menuSelector} > div.container a')
$('{menuSelector} span.highlight')

I have checked the documenation and such a feature does not exist. The problem with implementing such a feature is that jQuery needs to eval within the caller's context. Is this possible within javascript? Secondly how might I go about implementing this feature myself?

I am writing a lot of code where I am using the same selectors but snippets of them for example

$('#menu > div.container a')

and

$('#menu span.highlight')

is there any method to have '#menu' in a variable and use that instead? The issue I have with string concatenation is that it requires one to be extremey disciplined about its use as even a single missing space will mess things up. What I would rather do is something like below:

var menuSelector = '#menu';
$('{menuSelector} > div.container a')
$('{menuSelector} span.highlight')

I have checked the documenation and such a feature does not exist. The problem with implementing such a feature is that jQuery needs to eval within the caller's context. Is this possible within javascript? Secondly how might I go about implementing this feature myself?

• javascript
• jquery
• jquery-selectors

5 Answers 5

use node caching so you evaluate nodes faster (you start search from a cached context)

$menu = $('#menu');

$menu.children('div.container a')
$menu.find('span.highlight');

This should work

var menuSelector = '#menu';
$(menuSelector + ' > div.container a')
$(menuSelector + ' span.highlight')

If you want to avoid string concatenation, you achieve this using,

var menuSelectorObj = $('#menu');
$('div.container a',menuSelectorObj);
$('span.highlight',menuSelectorObj);

Sure:

var menuSelector = '#menu';
$(menuSelector +  ' > div.container a')
$(menuSelector +  ' span.highlight')

Notice that variable is concatenated with other sting using + operator.

You should add ; at the end of each line in case you are going to minify your script for faster performance and that is good practice in general:

var menuSelector = '#menu';
$(menuSelector +  ' > div.container a');
$(menuSelector +  ' span.highlight');

More Info:

• http://www.scriptingmaster./javascript/concatenating-strings-javascript.asp

If you want to concat string - sure you can:

var prefix = '#menu';

$(prefix + ' span')....

But if you want to query DOM elements that are childrens of '#menu' node - better cache this node and use it as a starting point:

var $menu = $('#menu') //very fast - uses native getElementById()
$menu.find('.highlight') //you do not need to specify <span>.
                         //only if you _really_ need to find <span class="highlight">

$('.highlight', $menu) //same as above - its shortcut for $elem.find()

$menu.children('.container').find('a') //not tested but maybe little faster than
                                       //child selector you use - '#menu > div.container a'

HTH