JQuery Variable In Selector without string concatenation

Question

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?

fcalderan · Accepted Answer · 2010-11-10 12:18:22Z

6

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

answered Nov 10, 2010 at 12:18

fcalderan

Sign up to request clarification or add additional context in comments.

Comments

rahul · Accepted Answer · 2010-11-10 12:04:35Z

4

This should work

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

answered Nov 10, 2010 at 12:04

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Chinmayee G · Accepted Answer · 2010-11-10 12:15:54Z

4

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

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

answered Nov 10, 2010 at 12:15

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

2 Comments

fcalderan Over a year ago

the second statement return all div.container at any nested level. He wants the immediate children.

Chinmayee G Over a year ago

then he can try with eq or firstchild also. $('div.container:eq(1) a',menuSelectorObj); OR $('div.container:first-child a',menuSelectorObj);

Sarfraz · Accepted Answer · 2010-11-10 12:09:58Z

1

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.com/javascript/concatenating-strings-javascript.asp

edited Nov 10, 2010 at 12:09

answered Nov 10, 2010 at 12:04

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Comments

NilColor · Accepted Answer · 2010-11-11 07:48:31Z

0

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

edited Nov 11, 2010 at 7:48

answered Nov 10, 2010 at 12:43

NilColor

3,5423 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

JQuery Variable In Selector without string concatenation

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related