1

I have the following lines of code

$("*[class]").each(function (index, elem)
{
    console.log("Element: " + elem.tagName + " " + $(elem).prop("className"));
});

What I can't understand is that what's the difference between elem and $(elem).
Isn't elem already a jJuery object? if yes then why do we need to put it again like $(elem) in the console.log argument to get the property className.
Why can't we directly do something like elem.prop("className").

gdoron
  • 147,333
  • 58
  • 291
  • 367
user2913184
  • 590
  • 10
  • 33

2 Answers2

3

First, there existed the DOM. This is the browser's way of understanding an HTML document once it has been parsed. The browser natively understands a certain way of accessing and interacting with the elements.

However, these are fairly limited and very verbose. They do not make it easy to write or to read.

This is why jQuery was created.

When you build a jQuery object with $(), it creates a new object that "wraps" the native DOM object, and indeed often is used to wrap multiple DOM objects and to work on them together. There are a whole load of functions that are available and which do all the verbose leg work for you, so your code is easy both to write and to read. Nothing new is possible with jQuery, but it's a lot quicker to write and to read.

In this case, elem is the native DOM object. When iterating over the collection with each, jQuery doesn't automatically convert DOM objects into jQuery objects. This is for two main reasons. First, you don't always need the jQuery object. If, for instance, all you want to do is get the element's tagName property, you can just do elem.tagName. Second, creating a jQuery object is computationally expensive. It could slow your script down significantly.

So if you want to get a jQuery object, you need to use the jQuery constructor yourself.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • +1 Exellent answer! just about that `$(element)` is expensive: http://stackoverflow.com/q/10433014/601179 – gdoron Nov 05 '13 at 19:41
  • @gdoron Well, it's expensive compared to not doing it at all... http://jsperf.com/jquery-constructor-in-an-each-function – lonesomeday Nov 05 '13 at 19:48
  • But what if i do something like var newElem = $("
    ").append("").append("") .append(""); Is the resulting object "newElem" is an element or a jquery object.     – user2913184 Nov 05 '13 at 19:51
  • @user2913184 A jQuery object. You created a jQuery object, and it will continue to be a jQuery object unless you ask for something else! [This question](http://stackoverflow.com/q/6974582/417562) may be of interest. – lonesomeday Nov 05 '13 at 19:53
  • @lonesomeday, I'm not saying it doesn't have a cost, I'm saying it's not **that** expensive. Of course if you can avoid writing useless code you should do it, especially inside loops. – gdoron Nov 05 '13 at 19:55
  • 1
    @gdoron Indeed. I'm just explaining why jQuery provides the DOM element, rather than creating a jQuery selection automatically. – lonesomeday Nov 05 '13 at 19:57
  • does it make sense to do something like var newElem = $("
    ").append($("")); or append method should only be passed html elements not converted jquery object.     – user2913184 Nov 05 '13 at 20:00
  • @user2913184 That makes sense, but it's unnecessary. All you need to do is pass the HTML string: jQuery will do the rest. It's all in the [API reference](http://api.jquery.com/append/). – lonesomeday Nov 05 '13 at 20:01
1

The each function parameter is the native DOM element, not the jQuery object wrapping that native DOM element.

Note that this behavior is true for all the jQuery functions that I know, val, attr, map ... ... always the parameter is the DOM element, not the jQuery object.

Also you can get to that native element with the this keyword.

Native element is an elements implementing the Element interface
jQuery object is simply an object wrapping a set of native elements( zero to N elements).
jQuery objects have more robust and easy API such as .html() while native elements have awkward API, many examples for that...

jQuery object has prop while native elements have just the property...
$(element).prop('id') VS element.id
This example is bad, as usually the native approach is not simpler. :)

Community
  • 1
  • 1
gdoron
  • 147,333
  • 58
  • 291
  • 367