在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以找到匹配的元素。有没有办法使用以前声明的变量而不是新的选择器？类似于以下内容（我知道，不起作用，这是为了让大家了解我在寻找什么）：

我认为选择器返回某种数组或对象。我要找的是一种合并它们的方法。有人知道这是否可能以及如何做到吗

谢谢你的帮助

只需使用以下方法：

给定一个表示 一组DOM元素，.add（） 方法构造一个新的jQuery对象 从这些元素和 传递到方法中的。这个 .add（）的参数可以是 $（）接受的任何内容，包括 jQuery选择器表达式，引用 添加到DOM元素或HTML代码段

---

从性能角度看，您是否会执行以下操作并不重要（即使有效）：

或者分别进行：

$($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"})
    }
}

---

传递引用数组：

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

---

在发布这篇文章几分钟后，我找到了解决方案。对于那些想知道的人，这里是：

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

速度快吗？我还不知道，我需要运行一些测试来找出答案

编辑：

我在这里用JS Fiddle进行了测试：

我每次都使用选择器进行测试，选择器都使用变量，变量使用$.merge（）和.add（）。每个测试运行1000次

我这边的结果如下（从快到慢）：

使用$.merge（）（平均7毫秒）

依次使用这两个变量（平均10ms，但代码需要复制）

使用.add（）（平均16毫秒）

每次使用选择器（平均295ms）

---

您始终可以将所有元素设置为一个变量：

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

您可以使用或方法：
添加

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

合并

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

这两种方法都可以，但add的性能更高。 来源：

---

信用：我对@GenericTypeTea和@Gabriel answers进行了投票，对二者进行了总结，比较了它们，结果如下。

使用“合并”的问题是，它仅限于两个选择器，如果超过两个，则使用“添加”将非常混乱，因此如果超过两个，您应该像这样使用“每个”：

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

---

将多个变量的ES6模板文本用作选择器：

$(`${$header_elements}, ${$footer_elements}`).css('color','#ff0000');

---

为了保持代码简单并防止代码重复，我使用了一个

forEach

循环

var$header_items=$（“#header li”）；
var$footer_items=$（“#footer li”）；
[$header\u items，$footer\u items].forEach（函数（$blockItems）{
//你在这里讲逻辑吗
$blockItems.css（'color'，'red'）；
});

标题

项目1
项目2
项目3
项目4
项目5

页脚

项目1
项目2
项目3
项目4
项目5

这肯定会比较慢，因为jquery将不得不合并变量，然后仍然使用
每个
检查它们。合并将直接附加到
$header\u元素
。。。使其包含
$footer\u元素
以及一些简单的性能测试。。。还要注意的是，函数
add（）
花费了更多的时间，但它看起来更干净，并删除了潜在的重复项：）@ravelen-看看jsperf，“慢”几乎是不明显的。性能不是问题的关键-事实上，$.merge（）永久性地修改了第一个参数是一个更大的问题（正如gnarf指出的那样）。合并后，$header\u元素现在将包含$footer\u元素集合，这意味着如果您只是想影响header元素，您就不能（不再次运行查询）。示例如下：这正是OP所说的他们不想做的。或者使用他的源代码示例：
$header\u elements.add（$footer_elements）.css（{color:'#ff0000'}）
根据我所做的测试，可能不是最快的可能性，但是gnarf是对的，它看起来更干净，如果两个“集合”之间有重复项，它会处理好的。谢谢！对于这种情况，add（）是正确的函数。几乎出乎意料的是，add（）不会永久修改jQuery集合。因此，即使将$footer\u元素添加到$header\u元素之后，从该点开始对$header\u元素的引用也只会影响原始集合。$.merge将永久修改参数中的第一个集合，因此在$.merge（$header\u元素，$footer\u元素）之后，对$header\u元素执行的任何操作都将影响$footer\u元素集合。-这里的示例：这是我的方法，但不能在数组中传递jQuery对象。您需要传递DOM元素。
$（[$header\u元素[0]，$footer\u元素[0]]）
如果你打算在问题发布近4年后再回答一个问题，你应该绝对确定你确实回答了正确的问题，并且你的解决方案比已经被接受的要好。你的回答甚至与原始问题的回答不太接近。我认为“原始问题”在某种程度上与jquery相关；）：d变量是jquery集合，因此您只需获得
“[
$header_elements.add($footer_elements).css({color:'#f00'});

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

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

$(`${$header_elements}, ${$footer_elements}`).css('color','#ff0000');