JQuery variable dans le sélecteur sans concaténation de chaîne

Question

Je suis en train d'écrire beaucoup de code où je suis en utilisant les mêmes sélecteurs mais extraits d'entre eux par exemple

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

et

$('#menu span.highlight') 

est-il une méthode pour avoir '#menu' dans une variable et l'utiliser à la place? Le problème que j'ai avec la concaténation de chaînes, c'est qu'il faut être très discipliné quant à son utilisation, car même un seul espace manquant va gâcher les choses. Ce que je préfère faire quelque chose comme ci-dessous:

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

J'ai vérifié la Documenation et une telle fonction n'existe pas. Le problème avec l'implémentation d'une telle fonctionnalité est que jQuery doit être évalué dans le contexte de l'appelant. Est-ce possible dans javascript? Deuxièmement, comment pourrais-je procéder à l'implémentation de cette fonctionnalité moi-même?

Answer 1

Bien sûr:

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

Notez que la variable est concaténé avec d'autres sting utilisant l'opérateur +.

Vous devez ajouter ; à la fin de chaque ligne au cas où vous allez rapetisser votre script pour une performance plus rapide et qui est bonnes pratiques en général:

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

Plus d'info:

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

Answer 2

Cela devrait fonctionner

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

Answer 3

Si vous voulez éviter la concaténation de chaîne, vous atteindre cet objectif en utilisant,

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

Answer 4

utiliser la mise en cache de nœud si vous évaluez les noeuds plus vite (vous commencez à la recherche d'un contexte mis en cache)

$menu = $('#menu'); 

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

Answer 5

Si vous souhaitez chaîne concat - que vous pouvez:

var prefix = '#menu'; 

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

Mais si vous voulez interroger des éléments DOM qui sont les enfants de '#menu' noeud - mieux cache ce noeud et l'utiliser comme point de départ:

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