Не работает attr() внутри forEach. Как изменить значение атрибута внутри forEach?

Question

[Cepesh16]

Задача взять текстовое значение из <a> и вставить его в свой атрибут href. Как можно изменить значение атрибута внутри forEach?

<a id="phone_number" class="phone-number" href="tel:">
    <i class="fas fa-phone"></i>
    <?php echo get_theme_mod( 'phone_number' ); ?>
</a>

$(document).ready(function () {
	[].forEach.call(document.getElementsByClassName('phone-number'), function(e, i, a) {
			var tel = e.lastChild.data.replace(/\s/g,''); // удаляю пробелы
			console.log(e);
			e.attr('href', 'tel:' + tel); //ОШБИКА! - e.attr is not a function
	});

Answer 1

[0xD34F]

Нечему работать. Объекты, с которыми вы имеете дело - обычные dom-элементы, а attr - это метод jquery.
Так что меняйте e.attr('href', 'tel:' + tel); на $(e).attr('href', 'tel:' + tel);.

Это если по-быстрому исправлять. Но вообще, я бы на вашем месте всё переписал без jquery. Вместо использования ready уносите скрипт в самый низ body или слушаете событие DOMContentLoaded. Ну а сама установка значения атрибуту href может выглядеть следующим образом:

document.querySelectorAll('.phone-number').forEach(n => {
  n.href = `tel:${n.text.replace(/\s/g, '')}`;
});

// или

for (const n of document.getElementsByClassName('phone-number')) {
  n.setAttribute('href', 'tel:'.concat(...n.textContent.match(/\S/g) || []));
}

Или, если не хотите отказываться от jquery, то хотя бы используйте её возможности более полно - долой forEach:

$('.phone-number').attr('href', function() {
  return 'tel:' + $(this).text().split(/\s/).join('');
});

Ну и это, вот бы узнать - как использование вами метода forEach (что указывает на наличие нескольких элементов) сочетается с показанным в разметке id="phone_number"? Вы что, не слышали, что значения id должны быть уникальны? Уберите id. Или, если элемент всё-таки один, не надо использовать методы перебора, чтобы не вводить в заблуждение людей, которые могут увидеть ваш код (себя в том числе, если вдруг вернётесь к коду спустя достаточно продолжительный отрезок времени, чтобы забыть, что там у вас и как).

Answer 2

[Александр]

Все правильно. Ваш код не использует классы JQuery.

$(e).attr('href', 'tel:' + tel);