Raw DOM element versus jQuery object

Question

I am considering the following example of an explicit iteration from http://jqfundamentals.com/chapter/jquery-basics :

$( 'li' ).each(function( index, elem ) { // this: the current, raw DOM element // index: the current element index in the selection // elem: the current, raw DOM element (same as this) $( elem ).prepend( '<b>' + index + ': </b>' ); }); 

Comments treat elem as a raw DOM element, but then the code calls .prepend() on elem .

I'm just starting to work with jQuery, but I understand that you can only call the jQuery method on a jQuery object, and not on the raw DOM element. I do not understand?

Answer 1

The code does not call prepend on elem , it calls it on $(elem) , making it a jquery object.

Answer 2

you again convert the raw DOM element to a jquery .. see the first $ sign in elem . elem is raw, but $(elem) is a jquery object, and so you can use any available prepend jQuery (methods) function, which is one

  $( elem ).prepend( '<b>' + index + ': </b>' ); //-^-- here this $ sign 

Answer 3

elem is a raw DOM element. By wrapping elem $(elem) , you create a jQuery object from a raw DOM element. jQuery allows you to do this. Then you call .prepend() on the jQuery object created with elem .

Answer 4

This may be helpful.

 var test = document.getElementById('test') //returns a HTML DOM Object var test = $('#test') //returns a jQuery Object var test = $('#test')[0] //returns a HTML DOM Object 

Answer 5

An “element” in the above example can be any tag (h1, p, body, a combination of tags, a specific link to an id or class) Just like CSS. Then "prepend" is the action that is performed on this element. In this case, the prepend action takes one parameter, which is another element that will be dynamically placed in html as the first child element for each element on the page that corresponds to the selected element

Answer 6

jQuery creates a wrapped element - a jQuery object, so maybe this will give you some idea:

 $('li').each(function (index, elem) { alert(elem === this); // true alert($(this) === $(elem)); // false alert(elem.tagName + $(elem).tagName); // LI undefined alert(typeof elem + typeof $(this));// object object alert(elem.tagName === $(this).prop('tagName')); // true }); 

Note that the second alert = false, so even if they refer to the same element, $ (this) and $ (elem) are NOT the same wrapped object. Note that "raw" elem has a .tagName, while a wrapped jQuery object does not.

SO for your

 $(elem).prepend('<b>' + index + ':</b>'); 

jquery takes the wrapped element ( $(elem) ) and then adds the NEW wrapped element "b" with the index and the symbol ":" as the text of its contents

EDIT: added an example property for tagName for the jQuery object in the following example and explanation of the prefile.

Answer 7

Unlike Prototype , jQuery does not extend its own objects. This is why you should use the $ function to get wrapped jQuery.