Как сделать порядковый номер для соседа снизу?

Question

[absoluteST]

Добрый день, я недавно начал изучать js, есть задачка которую нужно решить, но у меня не хватает опыта и я не нашёл работающего для меня решения моей проблемы, пытался сделать с помощью nextElementSibling, увы ничего.
Сама задача: для элемента #elem, найдите его соседа снизу и добавьте ему в начало порядковый номер.

<ul>
	<li>text</li>
	<li>text</li>
	<li id="elem">text</li>
	<li>text</li>
	<li>text</li>
</ul>

Я пробовал, но у меня ничего не получается.

Comments

[0xD34F]

порядковый номер

Что это такое?

Я пробовал

Как? Предлагаете поверить вам на слово? Чёрта с два, пока не покажите код, родившийся по ходу вашего "пробовал", никакого "пробовал" не было.

[absoluteST]

0xD34F, порядковый номер - это номер по порядку, 1, 2, 3 и т.д.
Код есть, но он работает неверно.

let box2 = document.querySelectorAll('#elem');
        for (let i = 0; i < box2.length; i++) {
            box2[i].innerHTML = i + 1 + '. ' + box2[i].innerHTML;
        }

[Rsa97]

absoluteST,

порядковый номер - это номер по порядку

Это понятно. Остаётся вопрос - по порядку чего?
Например, в вашем примере li с id="elem" будет иметь индекс 2 в списке элементов с селектором 'li', индекс 3 с селектором 'ul, li', индекс 0 с селектором '#elem'.
Так какой список нужно взять для определения порядкового номера?

[0xD34F]

absoluteST, "работает неверно" - предлагаете угадать, что это значит? Нет, так не будет. Рассказывайте, чем это "неверно" отличается от желаемого результата.

[absoluteST]

Rsa97, нужно брать номер с самого первого 'li' и в итоге должно получиться так, что сосед снизу будет иметь номер 4.

[absoluteST]

0xD34F, 1) я никак не задействовал свойство nextElementSibling, 2) нужно что бы порядковый номер считался с самого первого li.

Answer 1

[0xD34F]

Чьего соседа надо пронумеровать:

const parent = document.querySelector('ul');
const selector = '#elem';

Нумеруем:

const elem = parent.querySelector(selector)?.nextElementSibling;
if (elem) {
  const num = 1 + Array.prototype.indexOf.call(parent.children, elem);
  elem.textContent = num + '. ' + elem.textContent;
}

или

const elem = parent.querySelector(`${selector} + *`);
if (elem) {
  let num = 1;
  for (let n = elem; n = n.previousElementSibling; num++) ;
  elem.insertAdjacentText('afterbegin', `${num}. `);
}

или

const index = -~[...parent.children].findIndex(n => n.matches(selector));
if (index) {
  parent.children[index]?.prepend(''.concat(-~index, '. '));
}

Answer 2

[Absolute138]

document.querySelectorAll('ul > li').forEach((el, i)=>{
  if(el.id == 'elem'){ 
      el.nextElementSibling.prepend(i+2 + '. ');
      return false;
  }
});