时间戳

首页 > 解决方案 > 使用Javascript遍历无序列表

javascript - 使用Javascript遍历无序列表

问题描述

我有一个无序列表

我想以这样的方式计算这些嵌套列表，即在这个li<li>Animals</li>里面有 19 只动物。我想使用Javascript计算所有具有动物名称的li。我应该如何进行？

<ul>
  <li>
    Animals
    <ul>
      <li>
        Mammals
        <ul>
          <li>Apes
            <ul>
              <li>Chimpanzee</li>
              <li>Gorilla</li>
              <li>Orangutan</li>
            </ul>
          </li>
          <li>Coyotes</li>
          <li>Dogs</li>
          <li>Elephants</li>
          <li>Horses</li>
          <li>Whales</li>
        </ul>
      </li>
      <li>
        Other
        <ul>
          <li>
            Birds
            <ul>
              <li>Albatross</li>
              <li>Emu</li>
              <li>Ostrich</li>
            </ul>
          </li>
          <li>Lizards</li>
          <li>Snakes</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Fish
    <ul>
      <li>Goldfish</li>
      <li>Salmon</li>
      <li>Trout</li>
    </ul>
  </li>
</ul>

标签： javascripthtmldomnested-lists

解决方案

@mplungjan 在评论中提出了这个解决方案并且它有效。document.querySelectorAll("ul")[1].querySelectorAll("li").length

这给出了 17，这是正确的计数（在评论中澄清后，它覆盖了第一个计数，即 19）。

该问题询问有关遍历的问题，我们在此处逐步显示，以帮助提供更通用的解决方案。

我们首先必须找到包含所有其他列表的元素。我假设 ul 元素是文档中的第一个元素。在一般情况下，我们可能会通过知道它的 id 或它的类来找到这样的元素。

然后我们找到与 Animals 相关联的 li 元素，我们再次假设它是第一个，因为它在给定的 HTML 中。但是，如果要更复杂，您可能需要查找以 Animals 作为其 innerHTML 的 li 元素。

然后我们找到相关的 lis 并计算它们。

这是代码，您可以运行代码段以查看它是否达到 17（已在评论中澄清，问题中的原始计数为 19，还澄清这与计算实际动物名称无关，仅与计算 li 元素有关）。

<!DOCTYPE html>
<html>
<body>
<ul>
  <li>
    Animals
    <ul>
      <li>
        Mammals
        <ul>
          <li>Apes
            <ul>
              <li>Chimpanzee</li>
              <li>Gorilla</li>
              <li>Orangutan</li>
            </ul>
          </li>
          <li>Coyotes</li>
          <li>Dogs</li>
          <li>Elephants</li>
          <li>Horses</li>
          <li>Whales</li>
        </ul>
      </li>
      <li>
        Other
        <ul>
          <li>
            Birds
            <ul>
              <li>Albatross</li>
              <li>Emu</li>
              <li>Ostrich</li>
            </ul>
          </li>
          <li>Lizards</li>
          <li>Snakes</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Fish
    <ul>
      <li>Goldfish</li>
      <li>Salmon</li>
      <li>Trout</li>
    </ul>
  </li>
</ul>

<script>

var firstUL = document.getElementsByTagName('UL')[0]; //assuming the whole list is the first UL in the document
var animalsLI = firstUL.getElementsByTagName('LI')[0];
var animalsLIUL = animalsLI.getElementsByTagName('UL')[0];
var animalsLIs = animalsLI.getElementsByTagName('LI');

alert('The count of LIs is ' + animalsLIs.length);

</script>
</body>
</html>

推荐阅读