你如何使用jQuery（elementArray）？

Question

我在剧本的开头设置了这些：

var grid = $('#grid');
var lines = $('#lines');
var background = $('#background');

在脚本的其他地方，我需要同时更改所有3个元素的CSS。而不是这样做：

grid.css({...
lines.css({...
background.css({...

我想做其中一件事：

$(grid, lines, background).css({...
$([grid, lines, background]).css({...

但是，唯一可行的方法是直接引用ID，如下所示：

$('#grid, #lines, #background').css({

我更喜欢直接使用对元素的引用而不是ID，因为它们可能会动态更改。这可能吗？

Answer 1

使用.add()：

grid.add(lines).add(background).css({...});

演示：http://jsfiddle.net/mattball/xj5bb/

Answer 2

它适用于元素，而不是jQuery对象。 你可以使用.add()方法， 或$([grid[0], lines[0], background[0]])

看到这个jsfiddle： http://jsfiddle.net/HqurT/1/

（来源：http://forum.jquery.com/topic/jquery-elementarray-with-filled-elementarray）

我是女仆jsperf：http://jsperf.com/add-vs-elementarray

Answer 3

保存数组中的所有三个缓存选择器

var elements = [grid, lines, background];

然后在需要时循环浏览它们：

elements.each(function(element){
    element.css({...})
})

我还建议为缓存的选择器添加$前缀，以明确它们是什么。 ：）

Answer 4

我尝试使用以下声明并获得成功。

$.each([$('grid'), $('line'), $('background')], function(index) {
    $(this).*jqueryAPIs(...)*;
});

我认为“DOM元素包装在jQuery对象中”是指我们使用$()获得的元素对象。

希望这个答案有所帮助。