Возможно ли использовать несколько переменных вместо селекторов в jQuery

Я знаю, что быстрее выполнить следующее:

var $header = $("#header");
$header.css({color:"#ff0000"});
$header.find("a").addClass("foo");

Вместо:

$("#header").css({color:"#ff0000"});
$("#header a").addClass("foo");

Поскольку jQuery не нуждается в поиске элементов в DOM, поскольку мы имеем прямую ссылку на них.

Скажем, что у меня есть это:

var $header_elements = $("#header li");
var $footer_elements = $("#footer li");

И я использую оба отдельно для нескольких манипуляций jQuery. Но тогда мне нужно что-то сделать на обоих. Используя селектор, я бы сделал следующее:

$("#header li, #footer li").css({color:"#ff0000"});

Но затем DOM нужно снова проанализировать, чтобы найти соответствующие элементы. Есть ли способ использовать мои ранее объявленные переменные вместо нового селектора? Что-то вроде следующего (что работает не, я знаю, это дает представление о том, что я ищу):

$($header_elements + $footer_elements).css({color:"#ff0000"});

Я думаю, что селектор возвращает какой-то массив или объект. То, что я ищу, - способ объединить их. Кто-нибудь знает, возможно ли это и как это сделать?

Спасибо за вашу помощь!

Ответы

Ответ 1

Просто используйте метод add:

$header_elements.add($footer_elements).css({color:'#ff0000'});

Учитывая объект jQuery, который представляет набор элементов DOM,.add() метод создает новый объект jQuery от объединения этих элементов и те, которые прошли в метод. аргумент для .add() может быть в значительной степени все, что принимает $(), включая Выражение селектора jQuery, ссылки к элементам DOM или фрагменту HTML.

Ответ 2

Я нашел решения через несколько минут после публикации этого. Для тех, кто интересуется, вот он:

$.merge($header_elements, $footer_elements).css({color:"#ff0000"});

Это быстрее? Я еще не знаю, мне нужно будет запустить некоторые тесты, чтобы узнать.

EDIT:

Я тестировал его с помощью JS Fiddle здесь: http://jsfiddle.net/bgLfz/1/

Я тестировал с использованием селектора каждый раз, переменную для обоих селекторов, переменные с $.merge() и используя .add(). Каждый тест проводился 1000 раз.

Результаты на моей стороне следующие (от более быстрого до более медленного):

  • Использование $.merge() (в среднем 7 мс)
  • Использование обеих переменных один за другим (в среднем 10 мс, но код необходимо дублировать)
  • Использование .add() (в среднем 16 мс)
  • Использование селекторов каждый раз (в среднем 295 мс)

Ответ 3

Вы можете использовать add или merge метод:
Добавить

$header_elements.add($footer_elements).css({color:'#f00'});

слияния

$.merge($header_elements, $footer_elements).css({color:"#f00"});

Оба работают, но добавить более результативно. enter image description here Источник: http://jsperf.com/add-vs-merge

Кредит: Я поддержал ответы @GenericTypeTea и @Gabriel, сделал резюме обоих, сравнил их и вот результат.

Ответ 4

Передайте массив ссылок:

$([$header_elements, $footer_elements]).css({color:"#ff0000"});

Ответ 5

Не важно, насколько вы умны, вы будете делать что-то вроде (даже если это сработало):

$($header_elements + $footer_elements).css({color:"#ff0000"});

или выполните их отдельно:

$($header_elements).css({color:"#ff0000"});
$($footer_elements).css({color:"#ff0000"});

поскольку jquery будет внутренне проходить через предоставленные аргументы, используя each().

Если принцип более вдохновлен DRY, чем производительность, вы можете создать функцию:

function makeThemRed( el ) {el.css({color:"#ff0000"})}

а затем

makeThemRed($header_elements);
makeThemRed($footer_elements);

или даже:

function makeThemRed() 
{
   var l=arguments.length,
       o=0;
   while (o<l) {
       arguments[o++].css({color:"#ff0000"})
    }
}

а затем

 makeThemRed($header_elements, $footer_elements); //any number of parameters

Ответ 6

Вещь с использованием "merge" заключается в том, что она ограничивается двумя двумя селекторами, а использование "add" будет настолько беспорядочным, если оно больше двух, поэтому, если оно больше двух, вы должны использовать "каждый" следующим образом:

$([selector1, selector2, selector3, .....etc]).each(function(){
    // your code here
});

Ответ 7

Вы всегда можете установить все элементы в одну переменную:

var $lis = $('#header li, #footer li');
$($lis).css({color:"#ff0000"});