use underscore.js list functions on collection of jquery objects

Question

I'm am working with an app that uses both jQuery and underscore.js . I'd like to be able to use some of underscore's iterator functions, such as any() and all() over a collection of jQuery objects. is there a way to do this? I'd like to do something similar to the following:

checkboxes = $("input[type=checkbox]");
_.filter(checkboxes, function(box) {
    return box.is(":checked");
});

but this throws an error:

Uncaught TypeError: Object #<HTMLInputElement> has no method 'is'

so I'm assuming box in this context isn't acting like as a jQuery object.

Answer 1

You have to wrap box in jQuery:

checkboxes = $("input[type=checkbox]");
checkboxes = _.filter(checkboxes, function(box) {
    return $(box).is(":checked");
});

---

Also, instead of creating a new object for every single element in the collection, you could just use the native box.checked:

checkboxes = $("input[type=checkbox]");
checkboxes = _.filter(checkboxes, function(box) {
    return box.checked;
});

On a side note: jQuery has its own filter method:

checkboxes = $("input[type=checkbox]").filter(function() {
    return $(this).is(":checked");
});

---

Furthermore, in your example - are you sure you have to filter? You could just as easily use that as your selector:

checkboxes = $("input[type=checkbox]:checked")

Answer 2

Here box is a HTMLInputElement type object. Its not a jQuery object. As .is is a jQuery object method, you need jQuery object from box.

It can be just done by, $(box). Then apply .is().

$(box).is(":checked");