По клику на li добавить в конец ее порядковый номер

Question

Дан список ul. По клику на любую li добавьте ей в конец ее порядковый номер в списке, но только один раз.

Я получил доступ к каждому li, а также создал массив из всех li, чтобы использовать индексы каждого li как порядковые номера... и всЁ)

let lis = document.querySelectorAll("li");
let arr = [...document.querySelectorAll("li")];

for (const li of lis) {
  li.addEventListener("click", func);
  function func() {
    for (let i = 0; i < arr.length; i++) {
      li.innerHTML = li.innerText +[i];
    }
  }
}

<ul>
  <li>dasdasd</li>
  <li>dasdasd</li>
  <li>asdasdad</li>
  <li>dasdasdas</li>
</ul>

Answer 1

Получить все li и на каждую повесить событие 'click' c обработчиком
каждый раз при клике, чтобы определить индекс текущего элемента, нужно перебирать весь список и искать соответствующий объект.
Как только целевой элемент найден - для вставки элементов могут быть вариации, но суть в том, что придется добавлять указатели, что уже вставлялось, и проверять их чтобы не было дублей - !e.target.querySelector('span'). Добавление простейшим - e.target.insertAdjacentHTML('beforeend', <span>${index}</span>);

let lis = document.querySelectorAll("li");

lis.forEach(li => li.addEventListener('click', e => {

  if (e.target.querySelector('span')) return;

  lis.forEach((el, index) => {
    if (e.target === el) {
      e.target.insertAdjacentHTML('beforeend', `<span>${index}</span>`);
    }
  });

}));

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <ul>
    <li>0dasdasd</li>
    <li>1dasdasd</li>
    <li>2asdasdad</li>
    <li>3dasdasdas</li>
  </ul>
</body>

</html>

Более лаконичное решение, на основе одного из ответов ниже.

let lis = document.querySelectorAll("li");

lis.forEach((li, indx) => li.addEventListener('click', e => {
  if (e.target.querySelector('span')) return;
  e.target.insertAdjacentHTML('beforeend', `<span>${indx}</span>`);
}));

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <ul>
    <li>0dasdasd</li>
    <li>1dasdasd</li>
    <li>2asdasdad</li>
    <li>3dasdasdas</li>
  </ul>
</body>

</html>

Answer 2

let list = document.querySelectorAll("li");

list.forEach((el, i) => {
    el.addEventListener("click", () => { func(el, i) }, { once: true });
});

function func(el, i) { 
    el.innerHTML = `${el.innerText} ${i}`; 
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>dasdasd</li>
      <li>dasdasd</li>
      <li>asdasdad</li>
      <li>dasdasdas</li>
    </ul>
  </body>
</html>

Answer 3

document.addEventListener('click', e => {
  e.target.closest('li')?.classList.add('clicked')
})

ul { counter-reset: li 0; }
li { counter-increment: li; }
li.clicked:after { content: "(" counter(li) ")"; }

<ul>
  <li>Первый
  <li>Второй
  <li>Третий
  <li>Четвёртый
  <li>Пятый
  <li>Шестой
  <li>Седьмой
  <li>Восьмой
</ul>

Answer 4

document.addEventListener('click', e => {
  var li = e.target.closest('li')
  if (!li || li.classList.contains('clicked')) return
  li.classList.add('clicked')

  var i = Array.prototype.indexOf.call(li.parentElement.children, li)
  li.insertAdjacentText('beforeend', " (" + (i+1) + ")")
})

<ul>
  <li>Первый
  <li>Второй
  <li>Третий
  <li>Четвёртый
  <li>Пятый
  <li>Шестой
  <li>Седьмой
  <li>Восьмой
</ul>

Answer 5

а обязательно с JS? может нинада? :3

/* legacy style */
*:checked + label:after{
  content: counter(list-item); /* встроенный счетчик для LI внутри UL / OL
  который к слову, можно пощупать через <li VALUE='*'> */
  color: blue;
  background: gray;
  position: absolute;
  right: 0;
}

/* впереди паравоза style
https://webref.ru/css/has
p.s. за работоспособность :HAS`a не ручаюсь, ибо под рукой только FF 91 */
li:has(*:checked){
  list-style: decimal inside;
  direction: rtl;
  background: gold;
  color: darkgray;
}

li{
  border: 1px solid red;
  background: pink;
  display: list-item;
  position: relative;
}
label{display: block; text-align: center;}
input{display: none}

<ul>
  <li><label><input type='radio'>Feel</label></li>
  <li><label><input type='radio'>the</label></li>
  <li><label><input type='radio'>magic</label></li>

  <li><input type='radio' id='r1'><label for='r1'>of</label></li>
  <li><input type='radio' id='r2'><label for='r2'>pure</label></li>
  <li VALUE='57'><input type='radio' id='r3'><label for='r3'>CSS</label></li>
  <li><input type='radio' id='r4'><label for='r4'>...</label></li>
  <li><input type='radio' id='r5'><label for='r5'>...</label></li>
  <li><input type='radio' id='r6'><label for='r6'>...</label></li>
</ul>

Answer 6

document.addEventListener('click', e => {
  var li = e.target.closest('li')
  if (!li) return

  var i = Array.prototype.indexOf.call(li.parentElement.children, li)
  li.dataset.extra = " (" + (i+1) + ")"
})

[data-extra]::after {
  content: " " attr(data-extra);
}

<ul>
  <li>Первый
  <li>Второй
  <li>Третий
  <li>Четвёртый
  <li>Пятый
  <li>Шестой
  <li>Седьмой
  <li>Восьмой
</ul>

БЛОГ НА HUSL

По клику на li добавить в конец ее порядковый номер

Ответы (6 шт):

а обязательно с JS? может нинада? :3