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

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

Use $(this) for current Element

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

Answer 4

you should change "element" to "this":

var eachProduct = $(".item");

eachProduct.each(function(index, element){

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