JQuery的變量選擇沒有字符串連接

Question

我寫了很多，我現在用的是同樣的選擇，但它們的片段例如

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

和

$('#menu span.highlight') 

代碼有什麼方法在變量中有'#menu'並用它來代替？我對字符串連接的問題是，它需要對其使用極其嚴格，因爲即使是一個單一的缺失空間也會造成混亂。我寧願做的是類似下面的東西：

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

我檢查了documenation和這樣的功能並不存在。實現這種功能的問題是jQuery需要在調用者的上下文中進行評估。這是可能的JavaScript內？其次，我可以自己去實現這個功能嗎？

Answer 1

不確定：

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

注意，變量的值與使用+運營商之外刺痛。

你應該在的情況下，每行你要運行如下腳本更快性能的末尾添加;，這是一般好的做法：

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

更多信息：

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

Answer 2

這應該工作

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

Answer 3

如果你想避免字符串連接，你做到這一點使用，

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

Answer 4

使用節點緩存，以便您評估節點更快（你開始從緩存上下文搜索）

$menu = $('#menu'); 

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

Answer 5

如果你想Concat的字符串 - 確保您可以：

var prefix = '#menu'; 

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

但是，如果你想查詢中'#menu'節點的兒童DOM元素 - 更好的緩存這個節點，並以此爲出發點：

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