0

Не могу разобраться почему не считает, вроде отладчиком прошелся посмотреть чему равен li.dataset.liCount в процессе выполнения, и там почему-то NaN

for (let li of document.documentElement.getElementsByTagName('li')) {
      li.dataset.liCount = 0; // прописываем изначально всем li кастомный атрибут data-li-count равный 0, чтобы потом увеличение ++ правильно работало в плане типов данных
      countChild(li);
      console.log (li.firstChild.data.trim()); // выводим текстовое содержимое li
      console.log (li.dataset.liCount); // выводим количество вложенных li
    }


    function countChild (li) {
      if (li.firstElementChild) { // проверка есть ли дети элементы
        for (let child of li.children) { // если есть, то проверяем среди детей элементов, кто LI
          if (child.tagName === 'LI') {
            li.dataset.liCount++; // увеличиваем кастомный атрибут data-li-count
          }
          countChild (child); // запускаем функцию заново для ребенка li
       }
      }
    }
0

1 ответ 1

0

Эмм... это одна строчка:

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

for( let li of list ){
  li.dataset.liCount = li.querySelectorAll('li').length;
  
  li.insertAdjacentHTML('afterbegin', 'Вложено li: ' + li.dataset.liCount); // для демо
}
<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
    </ul>
  </li>
  <li></li>
</ul>

А в вашем коде, сложно сказать, где конкретно ошибка - местами есть косяки и он просто не работает (например, если в процессе найдется child-UL, то ему тоже запишется dataset). Попробовал написать рабочий вариант, максимально похожий на ваш)) Понадобилась внешняя переменная (т.к. функция вызывает сама себя), чтобы не запутавшись, спокойно плюсовать ему +1 после каждого найденного li. И в самом конце - записать это число в dataset.

let innerLi;
for (let li of document.getElementsByTagName('li')) {
  innerLi = 0;
  li.dataset.liCount = countChild(li);

  li.insertAdjacentHTML('afterbegin', 'Вложено li: ' + li.dataset.liCount); // для демо
}

function countChild(li) {
  if (!li.children.length) { return innerLi; }
  // Детей будет ноль - функция сразу прервется

  for (let child of li.children) {
    if (child.tagName === "LI") {
      innerLi++;
    }
    countChild(child);
  }
  return innerLi;
}
<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
    </ul>
  </li>
  <li></li>
</ul>

Но работать с такими переменными будет не очень удобно, как только у вас код станет чуть длиннее. Поэтому есть более классный вариант (см. google - функции-конструкторы):

for (let li of document.getElementsByTagName('li')) {
  li.dataset.liCount = ( new Count() ).child(li);
  
  li.insertAdjacentHTML('afterbegin', 'Вложено li: ' + li.dataset.liCount); // для демо
}

function Count() { 
  // функция при вызове new - будет создавать объект. this будет ссылаться на этот объект
  this.innerLi = 0;

  this.child = function(li) {
    if (!li.children.length) { return this.innerLi; }

    for (let child of li.children) {
      if (child.tagName === "LI") {
        this.innerLi++;
      }
      this.child(child);
    }
    return this.innerLi;
  }
}
<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
    </ul>
  </li>
  <li></li>
</ul>

6
  • Я знаю как сделать это в одну строчку, меня интересует где ошибка у меня.
    – GTB
    18 авг 2019 в 7:40
  • @jetzeny document.documentElement.getElementsByTagName('li') разве ни здесь ошибка ? 18 авг 2019 в 7:47
  • нет, тут всё правильно отрабатывает, создается коллекция из <LI> (в моем случае из 16 штук)
    – GTB
    18 авг 2019 в 8:02
  • @jetzeny Ну, как минимум - dataset возвращает строку, а строка неправильно будет считать, если ей дописать ++. li.dataset.liCount = +li.dataset.liCount + 1. Но это не решит проблему, т.к. ваш код требует, чтобы непосредственно внутри li оказались другие li и не учитывает, что там могут быть ul, внутри которых другие li. Нужно независимо от названия тега, кругами проверять все внутренние теги всех детей) 18 авг 2019 в 8:06
  • Он так и делает, проверяет есть ли у элемента ребенок, потом должен увеличить liCount этого элемента, если ребенок оказался <LI> и запускает эту же функцию уже для ребенка (в не зависимости от тега этого ребенка). Насчет первого замечания согласен.
    – GTB
    18 авг 2019 в 8:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.