Почему не работает attr() в выборке?

Question

[Вячеслав Лебедев]

Добрый день!
Не пойму, почему не срабатывает attr для каждого элемента выборки.
Ошибка: Uncaught TypeError: undefined is not a function

js:
$('.js-to-cart').each(function(i, elem) {
  console.log(elem); // отрабатывает
  console.log(elem.attr('data-item')); // ошибка
});

html: 
<button data-item="0" class="js-to-cart"></button>
<button data-item="1" class="js-to-cart"></button>
<button data-item="2" class="js-to-cart"></button>

Answer 1

[Евгений Петров]

Внутри each() каждый elem — ссылка на натуральный DOM-элемент.

Так что либо так

$('.js-to-cart').each(function(i, elem) {
	console.log($(elem).attr('data-item'));
});

либо так

$('.js-to-cart').each(function() {
	console.log($(this).attr('data-item'));
});

А вот ещё несколько приёмов

$('.js-to-cart').each(function(i, elem) {
	console.log(elem.dataset.item);
	console.log($(elem).attr('data-item'));
	console.log($(elem).data('item'));

	console.log(this.dataset.item);
	console.log($(this).attr('data-item'));
	console.log($(this).data('item'));
});

Нужно помнить, что data() в jQuery — не совсем то же самое, что и data-атрибуты. Это — метод у jQuery-объекта, позволяющий хранить любой тип данных. Значение атрибута — лишь стартовое значение, преобразованное, по возможности, в наиболее подходящий тип (например, попробуйте задать в качестве значения атрибута массив).

Answer 2

[WebDev]

через $(this) надо обращаться к атрибуту
console.log($(this).attr('data-item'));

Comments

[Вячеслав Лебедев]

Но для чего же используются передаваемые аргументы?

[WebDev]

i - счетчик, elem - html элемент, а вам нужен объект элемента, чтобы обратиться к attr(). Для этого нужен $(this)

[Вячеслав Лебедев]

kirill-93: Понял. Спасибо! :)

Answer 3

[barcik]

$('.js-to-cart').each(function() {
  console.log($(this));
  console.log($(this).attr('data-item'));
});