CODEWITHSUNDEEP
javascriptjquery
Mostafa Talebi
Mostafa Talebi

Reputation: 9183

jQuery throws an error that element.find() is not a function

I have written a small JS to iterate through a set of matched elements and perform some task on each of them.

Here is the code:

var eachProduct = $(".item");

eachProduct.each(function(index, element){

                var eachProductContent = element.find(".product-meta").clone();
});

When I console log element it outputs properly and the exact objects. Why should jquery throw this error?

Upvotes: 54

Views: 128664

Answers (4)

Sudharsan S
Sudharsan S

Reputation: 15393

Use $(this) for current Element 

var eachProductContent = $(this).find(".product-meta").clone();

Upvotes: 7

Amin Jafari
Amin Jafari

Reputation: 7207

you should change "element" to "this":

var eachProduct = $(".item");

eachProduct.each(function(index, element){

                var eachProductContent = $(this).find(".product-meta").clone();
});

Upvotes: 6

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

You are calling .find() on a plain JS object, But that function belongs to Jquery object

 var eachProductContent = $(element).find(".product-meta").clone();

You can convert it to a jquery object by wrapping it inside $(). And in order to avoid this kind of discrepancies you can simply use $(this) reference instead of using other.

Upvotes: 11

Arun P Johny
Arun P Johny

Reputation: 388406

because element is a dom element not a jQuery object

var eachProductContent = $(element).find(".product-meta").clone();

Inside the each() handler you will get the dom element reference as the second parameter, not a jQuery object reference. So if you want to access any jQuery methods on the element then you need to get the elements jQuery wrapper object.

Upvotes: 96

Related Questions