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

Question

Say I have these variables:

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

I want to bind an event handler to both inputs. I hoped this would work:

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

But alas, no. Is there a convenient way of gathering multiple jQuery objects into one for purposes like this?

Answer 1

在jquery的add（）中使用以添加 adding jquery object

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

Answer 2

Solution 1:

for using with object, you need to use .add()

Create a new jQuery object with elements added to the set of matched elements.

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

Solution 2:

also you can simply use comma separated multiple selector:

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

Answer 3

You can also try this:

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

See JSFiddle .

In your case use:

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

Answer 4

Reading the docs for jQuery's add() function, I noticed that my original attempt was almost correct. It is possible to initialize a jQuery object with an array of DOM Elements, so I could do this:

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

I highly prefer the add() function though.