创建一组 jQuery 对象最简单的方法

Question

创建一组 jQuery 对象最简单的方法

10

是的，我所做的方式是

   A.add(B).add(C).add(D).show()

假设A,B,C,D都是jQuery对象，我想知道是否有更简单的方法来实现以下操作？我尝试了以下所有方法，但都没有得到结果：

$(A,B,C,D).show()
A.add(B,C,D).show()

欢迎提出所有建议！

为了阐明问题：

".show()" 部分仅用于演示。我只是想知道如何创建一组类似于 $('p') 创建一组 p 标签的 JQuery 对象。

在我的实际情况中，我使用了

$([A,B,C,D]).each(fn)

使用.show()的替代方法（我想知道为什么这样可以用）。显然，

$([A,B,C,D]).each(fn)
$('p').each(fn)

两者都可以。但是

$([A,B,C,D]).show()  //--doesn't work
$('p').show()        //--works

只有第二行有效。有人知道它们的区别吗？（我以为它们是一样的，然后在我的问题中弄乱了一点）

- vantrung -cuncon

你尝试过文档吗？- http://api.jquery.com/add/ - mrtsherman

2

你有没有尝试过 $([A,B,C,D]).show()？ - namuol

1

@namuol: 我没想到这件事情如此简单，非常感谢！请问您能够把您的评论变成答案吗？我会接受它的。（这样别人就可以很容易地找到答案了） - vantrung -cuncon

@namuol - 不行，不起作用：http://jsfiddle.net/nrabinowitz/Jb6VD/ - nrabinowitz

@nrabinowitz：非常好的观点。我想我误解了；我以为A,B,C,D是DOM元素。 - namuol

显示剩余3条评论

4个回答

1

假设您有原始的DOM元素（而不是 jQuery对象，如$('#abc')或$('.abc')），则无需使用add：

$([A,B,C,D]).show();

请参阅$(...)函数的文档以获取详细信息。

如果你真的想要像$(A,B,C,D)这样的东西，其中A,B,C,D是jQuery对象，那么唯一的方法就是自己编写函数。

下面的代码可以实现这个功能：

var all = function() {
    var objs = $();
    $.each(arguments, function(i,e) {
        objs = objs.add(e);
    });
    return objs;
};

// ...

all(A,B,C,D).show();

工作示例：http://jsfiddle.net/Jb6VD/5/

- namuol

这个不起作用。jQuery只接受一个jQuery对象作为参数，而不是它们的数组。它接受DOM元素的数组，但不接受jQuery对象的数组。 - jfriend00

@jfriend00：我的回答明确指出假设A，B，C，D是DOM元素的数组，而不是jQuery对象。 - namuol

这篇文章还是很有帮助的。我仍然想知道为什么这会起作用： $([A,B,C,D]).each(function(){ ... }) - vantrung -cuncon

不完全是这样。$.each 对数组中的每个元素执行其回调函数，在这种情况下，这些元素恰好是 jQuery 对象，您可以对其应用 jQuery 函数。本质上，它与在每个对象上使用任何想要的函数相同。$.each 不会深入到数组中...如果在回调函数内部记录 this，则会得到多个元素的 jQuery 对象，而不是单个元素的 jQuery 对象。 - Félix Saparelli

我希望我可以接受不止一个解决方案，也接受这个。 - vantrung -cuncon

显示剩余6条评论

1

这是我能想到的最短版本：

A.add([B[0], C[0], D[0]]).show();

这里传入了元素数组，而不是 jQuery 对象。只有在 B、C 和 D 是单一元素数组的情况下才适用。

http://jsfiddle.net/nrabinowitz/Jb6VD/1/

- nrabinowitz

这只能获取B、C和D中的第一个DOM项。这不是A、B、C和D的真正联合。 - jfriend00

@jfriend00 - 是的，我在我的回答中指出了这个问题。这真的值得一个负评吗？ - nrabinowitz

0

要获取由多个jQuery对象（在某种程度上是“仅”数组）组成的并集结果集，您可以使用$.merge：

var union = $.merge( $.merge(A,B), $.merge(C,D) );

$.merge 只能用于一对数组，因此在大量 jQuery 对象上使用它会变得非常繁琐... 在这种情况下，您可以使用 $().get() 来获取“原始”数组并将它们使用 concat 连接在一起：

var union = $([].concat(A.get(), B.get(), C.get(), ...));
// Assuming A, B, C... are jQuery objects

- Félix Saparelli

是的，正如我所说的“最简单的方法”，这个答案已经超出了范围。但既然jQuery对象都是“原始数组”，为什么我们不能通过数组的concat方法将它们连接起来呢？ - vantrung -cuncon

你可以这样做。我认为$.merge是为了一些奇怪的兼容性问题而存在的...不确定。 - Félix Saparelli

我尝试过这个，但是.concat()对于jQuery对象不起作用：http://jsfiddle.net/nrabinowitz/twcK5/。如果它可以的话，你可以将多个数组作为参数，所以`A.concat(B,C,D)`会起作用...但它不起作用。 - nrabinowitz

我认为jQuery对象根本不是原始数组。我们不能使用jqObj.concat()。但是我们可以使用：$([A].concat(B,C,D))来返回与“真实数组”相同的效果。 - vantrung -cuncon

我从未说过jQuery对象是一个原始数组（$() instanceof Array === false），但它是类似数组的：在Firebug/Chrome控制台中查看，它“看起来”像一个数组。您还可以使用$('a')[n]获取jQuery对象中的第n个DOM元素。顺便说一句，您可以使用$('selector').get()获取原始数组。 - Félix Saparelli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- amosrivera · Accepted Answer

$.each([A,B,C,D], function(){ 
    $(this).css('background','red'); 
})

使用jQuery方法$.each，而不是使用选择器。该方法接受一个数组并迭代它。传递的数组是一组jQuery对象。每次迭代时，$(this)表示正在迭代的jQuery对象。

演示： http://jsfiddle.net/SCjMc/1/

$()的其他相关事实：

$(element)是jQuery(element)的快捷方式。 jQuery()方法接受不同类型的参数集：

enter image description here

每种类型的参数的描述都可以在此链接中找到。

其中一种参数类型是"elementArray"。其描述为：

elementArray 包含一组要包装在jQuery对象中的DOM元素的数组。

问题在于，当您使用jQuery选择一个元素时，它返回的是一个jQuery对象而不是直接返回DOM元素。因此，这将不会返回任何元素：

var element1 = $("selector1");
var element2 = $("selector2");
$([element1,element2]) // will not return any elements

为了返回一个DOM元素而不是jQuery对象，您需要访问jQuery对象中位置为0的属性。如下所示：$("element")[0]。这就是为什么这个会起作用的原因：

var element1 = $("selector1")[0]; //accessing dom element 
var element2 = $("selector2")[0]; //from jQuery object
$([element1,element2])