JQuery變量在選擇器中沒有字符串連接

Question

我正在編寫很多代碼，我使用的是相同的選擇器，例如它們的片段

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

和

$('#menu span.highlight')

是否有任何方法在變量中使用'#menu'並使用它？ 我對字符串連接的問題在於它需要對其使用進行極端的訓練，因為即使單個丟失的空間也會使事情變得混亂。 我寧願做的是下面的事情：

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

我檢查了文檔，這樣的功能不存在。 實現這樣一個特性的問題是jQuery需要在調用者的上下文中進行評估。 這可能在JavaScript中嗎？ 其次，我如何自己實現此功能？

Answer 1

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

$menu = $('#menu');

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

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

當然：

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

請注意，變量與使用+運算符的其他sting連接在一起。

你應該添加; 在每行結束時，如果您要縮小腳本以獲得更快的性能 ，這通常是一種很好的做法 ：

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

更多信息：

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

Answer 5

如果你想連接字符串 - 確保你可以：

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