How can I get a #<HTMLDivElement> as a jQuery object?

I need to do the following: I have a list of div's with the class contents. So I iterate over it until I find the one with the additional class: "test"

here is my code:

$.each( $(".contents"), function( key, value ) {
    if (value.hasClass("test"))
    {
        alert("got it");
    }
});

I'm getting the exception: Uncaught TypeError: Object #<HTMLDivElement> has no method 'hasClass'

How can I get a #<HTMLDivElement> as a jQuery object?

I need to do the following: I have a list of div's with the class contents. So I iterate over it until I find the one with the additional class: "test"

here is my code:

$.each( $(".contents"), function( key, value ) {
    if (value.hasClass("test"))
    {
        alert("got it");
    }
});

I'm getting the exception: Uncaught TypeError: Object #<HTMLDivElement> has no method 'hasClass'

• javascript
• jquery

• 1 Just pass it to the jQuery constructor. – Bergi Commented May 6, 2013 at 9:50
• Why don't you use some selector like $(".contents.test").each(alert.bind(window, "got it"))? Or $(".contents").filter(".test")? – Bergi Commented May 6, 2013 at 9:51

3 Answers 3

The each() function gives you DOM object and you have to convert it to jQuery object. You can pass value to $ jQuery function to convert it to jQuery object.

$.each( $(".contents"), function( key, value ) {
    if ($(value).hasClass("test"))
    {
        alert("got it");
    }
});

You do not need to iterate through each and simplify it like

elements = $(".contents.text")

Why not to do it simpler with:

$(".contents.test"). ...

Here jQuery will select element that has both "contents" and "test" classes set.

DEMO: http://jsfiddle/xfErG/

The main jQuery function can accept a DOM Element as its argument.

var foo = jQuery(HTMLElementNode);

The following two lines of code have the same end result:

var foo = jQuery('#foo');
var foo = jQuery(document.getElementById('foo'));