Возле каждого li вывести количество вложенных в него li, как это сделать?

Question

[Артём]

Пробовал через getElementsByTagName, но не могу по вложенным пройти.

Answer 1

[0xD34F]

вложенные li, например

<ul>
  <li><span>aaa</span></li>
  <li>
    <span>bbb</span>
    <ul>
      <li><span>bbb.1</span></li>
      <li>
        <span>bbb.2</span>
        <ul>
          <li><span>bbb.2.1</span></li>
          <li><span>bbb.2.2</span></li>
        </ul>
      </li>
      <li>
        <span>bbb.3</span>
        <ul>
          <li>
            <span>bbb.3.1</span>
            <ul>
              <li><span>bbb.3.1.1</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Если надо сосчитать количество "прямых" потомков (на один уровень вниз):

document.querySelectorAll('li').forEach(n => {
  const count = ((n.querySelector('ul') || {}).children || []).length;
  n.querySelector('span').textContent += ` (${count})`;
});

Если надо сосчитать количество всех li внутри текущего:

document.querySelectorAll('li').forEach(n => {
  const count = n.querySelectorAll('li').length;
  n.querySelector('span').textContent += ` (${count})`;
});

https://codepen.io/anon/pen/aXKBjz?editors=1010

Answer 2

[Алексей Лауд]

Подсказка

Можно делать так:

const someElement = document.getElementsByTagName("someTag");

А можно так:

const someChild = someElement.getElementsByTagName("someTag");