Question

I’m learning jQuery but I still don’t fully undestand how it works. Suppose I have an unordered list like this:

<ul>
<li name="one">xxx</li>
<li name="two">xxx</li>
<li name="three">xxx</li>
</ul>

and I want to subsitute every line’s text value with its name.
Can you explain me why this works:

$('li').each(function() {
    $(this).text($(this).attr('name'));
});

while this one does not?

$('li').text($(this).attr('name'));

Answer 1

They have completely different meaning.

In this:

$('li').each(function() {
    $(this).text($(this).attr('name'));
});

• Select all the lis.
• For each element found:
• Change my (li) text to:
  • Pick my (li) attribute.

$('li').text($(this).attr('name'));

• Select all the lis
• Change their text to:
  • Pick my window‘s attribute name.

In the last example you apply the same text to all the li‘s to the name found in your window.

EDIT: for clarification: in the last example, $(this) refers to wherever the function you are executing belongs to. It can be window, or an object.