Как правильно вывести текст заголовка элемента?

98
31 июля 2021, 12:30

Мне нужно для каждого элемента li.item в списке ul.list, найти и вывести в консоль текст заголовка элемента (теге h2) и количество элементов в категории (всех вложенных в него элементов li). Например для первой категории получится:

Категория: Животные Количество элементов: 4 Категория: Продукты Количество элементов: 3 Вот что у меня выводит консоль:

(3) ["Категория: Животные Количество элементов: 4", "Категория: Животные Количество элементов: 3", "Категория: Животные Количество элементов: 5"]

У меня считает количество элементов в категории нормально а, заголовок выводит только животные. Подскажите пожалуйста в чем проблема) Вот мое решение

'use strict'; 
const categoriesUl = Array.from( 
    document.querySelectorAll("ul#categories>li.item") 
  ); 
  console.log(`В списке ${categoriesUl.length} категории`); 
  const categoriesList = Array.from( 
    document.querySelectorAll("ul#categories li.item ul ") 
  ); 
  const categoriesArr = []; 
  categoriesList.forEach(element => { 
    categoriesArr.push( 
      `Категория: ${ 
        document.querySelector("h2").textContent 
      } / Количество элементов: ${element.children.length}` 
    ); 
  }); 
  console.log(categoriesArr);
<ul id="categories"> 
  <li class="item"> 
    <h2>Животные</h2> 
 
    <ul> 
      <li>Кот</li> 
      <li>Хомяк</li> 
      <li>Лошадь</li> 
      <li>Попугай</li> 
    </ul> 
  </li> 
  <li class="item"> 
    <h2>Продукты</h2> 
 
    <ul> 
      <li>Хлеб</li> 
      <li>Петрушка</li> 
      <li>Творог</li> 
    </ul> 
  </li> 
  <li class="item"> 
    <h2>Технологии</h2> 
 
    <ul> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>JavaScript</li> 
      <li>React</li> 
      <li>Node</li> 
    </ul> 
  </li> 
</ul>

Answer 1
const items = document.querySelectorAll('.item');
Array.prototype.forEach.call(items, (element) => {
    const title = element.querySelector('h2').innerHTML;
    const itemsLength = element.querySelectorAll('li').length;
    console.log(`Категория: ${title} / Количество элементов: ${itemsLength}`);
});
Answer 2
const ul = Array.from(document.querySelector('#categories').children);
for (let elem of ul) {
    let category = elem.firstElementChild.textContent;   
    let quantityElem = elem.lastElementChild.children.length;
    console.log(`Категория: ${category} \nКоличество элементов: ${quantityElem}`);
};
READ ALSO
переключатель языков сайта
javascript

переключатель языков сайта

 117
как конвертировать видео vk в daxab или crazycloud
javascript

как конвертировать видео vk в daxab или crazycloud

Первоначальный источник https://vkcom/video-71893149_636242344

 94
Правильное использование тега main
CSS

Правильное использование тега main

Можно ли использовать тег main в качестве родительского для всей html-страницы после body? Чем его можно заменить, если не использовать div, а header...

 210
вставить пару изображений в input
CSS

вставить пару изображений в input

Верстаю главную страницу google,большого опыта не имею,дошел до создания формы ввода запроса и тут на тебеНадо добавить три фотографии в input,значок...

 266