jQuery: замена текстовых значений элементов списка их именами

Question

Я изучаю jQuery, но до сих пор не совсем понимаю, как это работает. Предположим, у меня есть неупорядоченный список, подобный этому:

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

и я хочу заменить текстовое значение каждой строки ее именем. Можете ли вы объяснить мне, почему это работает:

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

а этого нет?

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

Answer 1

Они имеют совершенно другое значение.

В этом:

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

• Выберите все li с.
• Для каждого найденного элемента:
• Изменить мой (li) текст на:
  • Выберите мой (li) атрибут.

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

• Выбрать все li s
• Измените их текст на:
  • Выберите мой атрибут window name.

В последнем примере вы применяете один и тот же текст ко всем li к имени, найденному в вашем окне.

РЕДАКТИРОВАТЬ : для пояснения: в последнем примере $(this) относится к функции, к которой принадлежит выполняемая вами функция. Это может быть window или объект.

Answer 2

Потому что в последнем примере итерация происходит внутри функции. this не ссылается на каждый элемент, но то, что происходит в текущем контексте.

Вот почему вы должны перебирать каждый элемент.