$ (This) in jQuery is not a loop variable?

Question

The following puts the id name of each div in 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 this? I thought $ (this) is a loop variable? Is there a way to do this without using each() ?

Answer 1

when using .each you pass the function as an argument. jQuery ensures that this correct in its context.

When calling .prepend($(this).attr('id')) JavaScript evaluates the identifier before calling prepend. Asuuming you are in $(document).ready , and the document does not have an identifier, this is the same as calling .prepend(""); .

Answer 2

Well, think about it in terms of a common programming language (which it is because it is JavaScript). You call the preend method for some_object_here.

What parameters do you specify in the JavaScript engine in the BEFORE YOU GET STARTED method? The answer is simple, you say JavaScript immediately evaluate the value of "$ (this) .attr ('id')", and then pass it to the method.

The reason you get the desired result with “each” is because you are passing 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 3

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

And in your first example, you are repeating objects, and you can access this , but in the second example, it will return a collection of the object and you cannot directly use this .

See This Keyword

Answer 4

Try:

 .prepend(function(idx, element){ }) 

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

Otherwise, I don’t see how you can iterate over elements using the $ (this) object without the actual source of the iteration.

Answer 5

The moment you use 'this' 'this', this is a group of elements as an array / object, so you really 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 it is using console.log (this) in firebug.

Answer 6

This is called closing , unfortunately, other answers do not contain this very important keyword. I recommend reading this question: How does javascript close work? and in this article .

.each() creates a closure, .prepend() if you do not pass a function, no, although it can take a function to solve your current problem , for example

 $('#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 that you are on , outside of them, it refers to any context you are in, for example:

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

The jQuery object is an array inside, an array of references to DOM elements, regardless of whether it was selected from a selector, manually added , etc. Functions that loop into them, .each() or passing a function to others, .prepend() , .attr() , .css() , etc. all create closures in which this refers to the element in the array that you are currently in when you get over.

I can’t say that the question and article are enough to get a clearer picture of this, it can clarify a few more questions that you have.