CODEWITHSUNDEEP
javascriptjquery
Johan
Johan

Reputation: 35194

jquery.each() - "this" vs valueOfElement

In a jQuery.each() loop, I always thought that this was equivalent to valueOfElement. Could someone explain the difference?

Example:

$.each(object, function(i, val){
    $('body').append('<b>valueOfElement:</b> ' + typeof val + ' - ' +  
    '<b>this: </b>' + typeof this + '<br/>');
});

Result: 

valueOfElement: string - this: object
valueOfElement: boolean - this: object
valueOfElement: object - this: object

Fiddle

Upvotes: 7

Views: 832

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382132

The answer is in the documentation you linked to :

The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.

All values are embedded in objects when accessed as this.

The real reason can be found in this line of jQuery source :

callback.call( obj[ i ], i, obj[ i++ ] ) === false ) {

You can compare it to

(function(){console.log(this)}).call(1);

which builds a Number, because you can't call a function on something that isn't an object.

From MDN on the call function :

thisArg :

Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, null and undefined will be replaced with the global object, and primitive values will be boxed.

The only advantages I would see in using this instead of valueOfElement are :

  • simplicity : you don't have to keep in mind the order of arguments given to the callback
  • ability to use a function directly on this even if valueOfElement is of primitive type

Upvotes: 14

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

The this keyword will access the element as a JavaScript object. You can get it's value the same way you would any other JavaScript object, or you can wrap it ($(this)) to make it into a jQuery object.

Upvotes: 0

Related Questions