如何将多个jQuery对象收集到一个jQuery对象中？

Question

说我有这些变量：

var container = $("div#my-awesome-section");
var foo_input = $("input[name=foo]", container);
var bar_input = $("input[name=bar]", container);

我想将事件处理程序绑定到两个输入。我希望这会奏效：

$([foo_input, bar_input]).on("keypress", function() { /* ... */ });

但是，唉，不。有没有一种方便的方法可以将多个jQuery对象收集到一个这样的目的？

Answer 1

在jquery中使用 add() adding jquery object

foo_input.add(bar_input).on("keypress", function() { /* ... */ });

Answer 2

解决方案1：

要与对象一起使用，您需要使用 .add()

  

创建一个新的jQuery对象，其中元素已添加到匹配元素集中。

 foo_input.add(bar_input).on("keypress", function() { /* ... */ });

解决方案2：

你也可以简单地使用逗号分隔的多个选择器：

 $("input[name=foo],input[name=bar]", container).on("keypress", function() { /* ... */ });

Answer 3

你也可以试试这个：

$.each([foo_input, bar_input], function() {
    /* ... */
});

请参阅JSFiddle。

在您的情况下使用：

$.each([foo_input, bar_input], function() {
    $(this).on("keypress", function() {
        /* ... */
    }); 
});

Answer 4

阅读jQuery's add()函数的文档，我注意到我的原始尝试几乎正确。可以用DOM Elements数组初始化一个jQuery对象，所以我可以这样做：

$([foo_input[0], bar_input[0]]).on("keypress", ...

我非常喜欢add()功能。