在jQuery中是否可以使用多个变量来代替选择器

ycl3bljg  于 2023-01-16  发布在  jQuery
关注(0)|答案(9)|浏览(107)

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

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操作。但是,我需要对这两个函数做一些事情。使用selector,我可以这样做:

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

但是,DOM需要再次解析以找到匹配的元素。有没有办法使用我之前声明的变量而不是新的选择器?类似于下面的代码(我知道,这起作用,这是为了让人知道我在寻找什么):

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

我认为选择器返回某种数组或对象。我正在寻找一种合并它们的方法。有人知道这是否可能以及如何实现吗?
谢谢你的帮忙!

6mw9ycah

6mw9ycah1#

无论你是否会做这样的事情(即使它起作用了),性能都无关紧要:

$($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
laik7k3q

laik7k3q2#

使用'merge'的问题是它仅限于两个选择器,如果多于两个,使用'add'会很麻烦,所以如果多于两个,您应该像这样使用'each':

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

pvcm50d13#

为了保持代码简单并防止代码重复,我使用了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>
icnyk63a

icnyk63a4#

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

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

yfwxisqw5#

使用ES6模板常量作为多个变量的选择器:

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

syqv5f0l6#

只需使用add方法:

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

给定一个表示一组DOM元素的jQuery对象,.add()方法从这些元素和传入该方法的元素的并集构造一个新的jQuery对象。.add()的参数几乎可以是$()接受的任何内容,包括jQuery选择器表达式、对DOM元素的引用或HTML片段。

wpcxdonn

wpcxdonn7#

下面是一个解决方案:

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

我在这里用JS Fiddle测试了它:http://jsfiddle.net/bgLfz/1/
我每次都使用选择器进行测试,两个选择器都使用变量,变量使用$.merge()和使用.add()。
我这边的结果如下(从快到慢):
1.使用$.merge()(平均7毫秒)
1.依次使用两个变量(平均10 ms,但需要复制代码)
1.使用.add()(平均16毫秒)
1.每次使用选择器(平均295 ms)

vwoqyblh

vwoqyblh8#

可以使用addmerge方法:

加上

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

合并

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

两种方法都有效,但add的性能更高. x1c 0d1x来源:http://jsperf.com/add-vs-merge

**信用:**我投票支持@GenericTypeTea和@Gabriel的答案,对两者进行了总结,比较了它们,下面是结果。

lzfw57am

lzfw57am9#

传递引用数组:

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

相关问题