Переменная JQuery In Selector без объединения строк

Question

Я пишу много кода, в котором я использую те же селекторы, но их фрагменты, например,

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

и

$('#menu span.highlight')

, есть ли какой-нибудь метод, чтобы получить '#menu 'в переменной и использовать это вместо?Проблема, с которой я сталкиваюсь при конкатенации строк, заключается в том, что она требует очень строгой дисциплины в отношении ее использования, поскольку даже один пропущенный пробел может испортить ситуацию.Я бы предпочел сделать что-то вроде ниже:

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

Я проверил документацию и такой функции не существует.Проблема с реализацией такой функции заключается в том, что jQuery должен быть оценен в контексте вызывающего.Возможно ли это в JavaScript?Во-вторых, как мне самому реализовать эту функцию?

Answer 1

использовать кэширование узлов, чтобы вы быстрее оценивали узлы (вы начинаете поиск из кэшированного контекста)

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

Sure:

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 5

Если вы хотите объединить строку - конечно, вы можете:

var prefix = '#menu';

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

Но если вы хотите запросить элементы DOM, которые являются потомками узла '#menu' - лучше кэшируйте этот узел и используйте его в качестве начальноготочка:

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