Найти число на странице, выполнить сложение, и заменить на результат?

Question

[Zubastik_1]

Помогите пожалуйста решить задачу. Есть числа.

<span class='pups'>1</span>
<span class='pups'>2</span>
<span class='pups'>3</span>
.....

Надо к каждому прибавить 2. То есть должно получиться

<span class='pups'>3</span>
<span class='pups'>4</span>
<span class='pups'>5</span>
.....

Answer 1

[0xD34F]

$('.pups').each(function() {
  this.innerHTML -= -2;
});

// или

$('.pups').text((i, text) => Number(text) + 2);

// или

document.querySelectorAll('.pups').forEach(n => {
  n.innerText = -~-~n.innerText;
});

// или

for (const n of document.getElementsByClassName('pups')) {
  n.textContent = parseInt(n.textContent) + 2;
}

Comments

[Zubastik_1]

Спасибо, а что значит -= ? А как умножить на 2?

[0xD34F]

-= означает вычесть и присвоить результат. Почему вычитаем -2, а не прибавляем 2? Потому что innerHTML - это строка, а сложение строк и чисел в javascript'е имеет результатом строку, т.е. вместо 3 было бы 12, вместо 4 было бы 22, вместо 5 было бы 32. А вот вычитание из строки преобразует строку в число, так что получаем нужный результат.

Как умножить? Да так же: this.innerHTML *= 2.

[Zubastik_1]

0xD34F, спасибо за помощь!

[Zubastik_1]

А не подскажете ещё как полученное число привести к виду - с разделителем-пробелом тысяч. Пробовал типа - но не получается

this.innerHTML -= -2.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')

[0xD34F]

this.innerHTML = (+this.innerHTML.replace(/\D/g, '') + 2).toLocaleString('ru-RU');

Answer 2

[Дмитрий]

let pups = document.querySelectorAll('.pups');

for (let i = 0; i < pups.length; i++) {
  pups[i].innerHTML = +pups[i].innerText + 2;
}

Comments

[Zubastik_1]

Спасибо, а не подскажете ещё как полученное число привести к виду - с разделителем-пробелом тысяч. Пробовал типа - но не получается

this.innerHTML -= -2.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')

[Дмитрий]

Zubastik_1, Пример

[Zubastik_1]

Спасибо огромное!