主页 / 问题 / 1026123
Accepted
hzybodska
Asked:2020-09-20 02:53:54 +0000 UTC2020-09-20 02:53:54 +0000 UTC

如何正确显示元素的标题文本？

  • 772

对于 ul.list 中的每个 li.item，我需要找到元素的标题文本（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>

javascript

2 个回答

  1. Best Answer
    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}`);
});
    • 1 
  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}`);
};
    • 1

相关问题