The $(this) in jQuery is not a loop variable?

Question

The following put the id name of each div inside the div as content:

        <div id="divDiv">

        </div>

        <div id="divLink">

        </div>
[...]

$('div').each(function() { $(this).prepend($(this).attr('id')) })

will work but

$('#divStatus div').prepend($(this).attr('id'))

will not. Why is that? I thought $(this) is the loop variable? Is there a way to do the above without using each() ?

Answer 1

$(this) is just a jquery wrapper for the currently used object.

And in your first sample you are iterating through objects and you can access this, but in your second sample it will return a collection of object and you can't use this directly on them.

See The this keyword

Answer 2

Hi there.

Try:

.prepend(function(idx, element){


})

.prepend( function(index, html) ) function(index, html)A function that returns an HTML string to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments.

Other then this, I can't see how you can iterate over elements using the $(this) object without an actual iteration source.

Cheers. Jas.

Answer 3

At the point you use 'this' 'this' is group of elements as an array/object so really you need to use:

$('#divStatus div')[0]

or

$('#divStatus div').get(0)

to get the first element in the array. You should be able to see what this is by using console.log(this) in firebug.

Answer 4

Ok, think about this in terms of a regular programming language (which it is, because it's JavaScript). You are calling the "prepend" method of the 'some_object_here'.

What parameters are you telling the JavaScript engine to pass into the method BEFORE RUNNING IT? The answer is simple, you are telling JavaScript to immediately evaluate the value of "$(this).attr('id')" and then pass that into the method.

The reason why you get the desired result with the "each" is that you are passing in a function that will be evaluated later, when the context tells the JavaScript engine that "this" means the current object (which at that time is the actual div itself).

Answer 5

when using .each you pass a function as an argument. jQuery makes sure this is correct in its context.

When calling .prepend($(this).attr('id')), JavaScript evaluates the id before calling prepend. Asuuming you're in $(document).ready, and the document doesn't have an ID, it is the same as calling .prepend("");.

Answer 6

This is called a closure, unfortunately no other answers contain this very important keyword. I recommend reading this question: How does a javascript closure work ? and this article.

.each() creates a closure, .prepend(), unless you're passing a function, doesn't, though it can take a function to solve your current issue, like this:

$('#divStatus div').prepend(function() {
  return $(this).attr('id'); //or this.id if you're sure it has one
});

Inside these closures this refers to the element in the array you're on, outside them, it refers to whatever context you're in, for example:

$(function() { //short for $(document).ready(function() {
  $('#divStatus div').prepend($(this).attr('id')) //this refers to document
});

A jQuery object is an array inside, an array of references to DOM elements, whether from a selector finding them, manually added, etc. The functions that loop though these, either .each() or passing a function to various others, .prepend(), .attr(), .css(), etc all create closures in which this refers to the element in the array you're currently on when looping through.

I can't stress reading that question and article enough to get a clearer understanding of this, might clear up a few other questions you have as well.