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

JQuery变量在选择器中没有字符串连接

5 个答案: