Нумерация абзацев JS

157

11 января 2021, 04:50

Как пронумеровать все абзацы страницы и добавить номер ПЕРЕД текстом абзацев, а не после ?

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
  <title>JavaScript</title> 
</head> 
 
<body> 
    <p id="p">text</p> 
    <p id="p">text</p> 
    <p id="p">text</p> 
 
<script> 
 var p = document.querySelectorAll('#p'); 
 
for (var i = 0; i < p.length; i++) { 
  var n = i + 1; 
  p[i].innerHTML += " " + n; 
} 
 
</script> 
</body> 
</html>

Answer 1

Просто замените конструкцию value += add (что эквивалентно value = value + add) на value = add + value:

const p = document.querySelectorAll(".paragraph") 
 
for (let i = 0; i < p.length; i++) { 
  const n = i + 1 
  p[i].innerHTML = n + " " + p[i].innerHTML 
}

<p class="paragraph">text</p> 
<p class="paragraph">text</p> 
<p class="paragraph">text</p>

Answer 2

Есть куча способов, выбирайте любой из предложенных. Вот ещё один:

document.querySelectorAll('.p').forEach((e, i) => { 
  e.innerHTML = `${ i++ > 8 ? i : "0" + i }. ${e.innerHTML}` 
})

<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p>

Answer 3

На странице не может быть больше одного id. Для такой задачи можно использовать классы. В вашем случае даже если оно срабатывает с id - где-нибудь в другом месте это приведет к ошибке.
Если внутри не будет никакого HTML-кода, то принято использовать innerText вместо innerHTML.
Добавлена дополнительная переменная zero, которая равняется строке "0", если номер меньше 10, и пустой строке "", если больше. Чтобы добавить нолики перед числами. Просто уберите из кода эту строчку, если не нужно такое))

var p = document.getElementsByClassName('p'); 
var zero; 
for (var i = 0; i < p.length; i++) { 
  zero = ( i < 9 ) ? "0" : ""; 
  p[i].innerText = zero + (i+1) + ". " + p[i].innerText; 
}

<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p> 
<p class="p">text</p>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

this jQuery не работает

Почему этот код работает:

169

javascript

Автозаполнение массива JS с циклом for

Хочу заполнить массив числами от 0 до 10

159

javascript

Перебор свойств объекта и вывод в таблицу

Прошу помощиКак создать таблицу и заполнить значениями,а столбец address вывести city + street (т

140

javascript

Остановка setInterval из прототипа [дубликат]

Есть конструкция в ходе которой у объекта есть переменная interval и через методы в прототипе этой переменной задаётся setInterval и при нажатии на кнопку...

156