是否可以在jQuery中使用多个变量而不是选择器

Question

我知道执行以下操作会更快：

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"});

我认为选择器返回某种数组或对象。我正在寻找的是一种合并它们的方法。任何人都知道这是否可行以及如何做到这一点？

感谢您的帮助！

Answer 1

只需使用add方法：

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

  

给出一个代表的jQuery对象   一组DOM元素，.add（）   method构造一个新的jQuery对象   从这些元素的结合和   传递给方法的那些。该   .add（）的参数可能非常多   $（）接受的任何内容，包括a   jQuery选择器表达式，引用   到DOM元素或HTML片段。

Answer 2

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

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

更快吗？我还不知道，我需要运行一些测试才能找到答案。

编辑：

我在这里用JS Fiddle测试了它：http://jsfiddle.net/bgLfz/1/

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

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

1. 使用$ .merge（）（平均7ms）
2. 一个接一个地使用这两个变量（平均10ms，但代码需要重复）
3. 使用.add（）（平均16ms）
4. 每次使用选择器（平均295ms）

Answer 3

您可以使用add或merge方法：
添加

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

<强>合并

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

两者都有效，但添加更高效。 来源： http://jsperf.com/add-vs-merge

信用：我赞成了@GenericTypeTea和@Gabriel的答案，做了两者的总结，比较了它们，结果就是这里。

Answer 4

传递一系列参考文献：

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

Answer 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

Answer 6

使用＆＃39; merge＆＃39;它只限于两个选择器，使用＆＃39;添加＆＃39;如果它超过两个，那将是如此混乱，所以如果它超过两个，你应该使用＆＃39;每个＆＃39;像这样：

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

Answer 7

为了保持代码简单和防止代码重复，我使用了forEach循环。

var $header_items = $("#header li");
var $footer_items = $("#footer li");

[$header_items, $footer_items].forEach(function($blockItems){
    // do logic here
    $blockItems.css('color', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
    <h1>Header</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div id="footer">
    <h1>Footer</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

Answer 8

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

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

Answer 9

使用ES6模板文字将多个变量用作选择器：

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