我知道执行以下操作会更快:
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"});
我认为选择器返回某种数组或对象。我正在寻找一种合并它们的方法。有人知道这是否可能以及如何实现吗?
谢谢你的帮忙!
9条答案
按热度按时间6mw9ycah1#
无论你是否会做这样的事情(即使它起作用了),性能都无关紧要:
还是分开做:
因为jquery将使用
each()
在内部遍历所提供的参数。如果这个原理更多地受到
DRY
的启发,而不是性能方面的启发,那么您可以创建一个函数:然后
或者甚至:
然后
laik7k3q2#
使用'merge'的问题是它仅限于两个选择器,如果多于两个,使用'add'会很麻烦,所以如果多于两个,您应该像这样使用'each':
pvcm50d13#
为了保持代码简单并防止代码重复,我使用了
forEach
循环。icnyk63a4#
您始终可以将所有元素设置为一个变量:
yfwxisqw5#
使用ES6模板常量作为多个变量的选择器:
syqv5f0l6#
只需使用
add
方法:给定一个表示一组DOM元素的jQuery对象,.add()方法从这些元素和传入该方法的元素的并集构造一个新的jQuery对象。.add()的参数几乎可以是$()接受的任何内容,包括jQuery选择器表达式、对DOM元素的引用或HTML片段。
wpcxdonn7#
下面是一个解决方案:
我在这里用JS Fiddle测试了它:http://jsfiddle.net/bgLfz/1/
我每次都使用选择器进行测试,两个选择器都使用变量,变量使用$.merge()和使用.add()。
我这边的结果如下(从快到慢):
1.使用$.merge()(平均7毫秒)
1.依次使用两个变量(平均10 ms,但需要复制代码)
1.使用.add()(平均16毫秒)
1.每次使用选择器(平均295 ms)
vwoqyblh8#
可以使用
add
或merge
方法:加上
合并
两种方法都有效,但add的性能更高. x1c 0d1x来源:http://jsperf.com/add-vs-merge
**信用:**我投票支持@GenericTypeTea和@Gabriel的答案,对两者进行了总结,比较了它们,下面是结果。
lzfw57am9#
传递引用数组: