时间戳

首页 > 解决方案 > 如何获得特定元素的父母？

javascript - 如何获得特定元素的父母？

问题描述

我正在尝试获取一个元素（具有“活动”类）的所有父级（具有“父级”类），然后对其应用样式。但它似乎没有找到我要求的元素。

这是我目前使用的 HTML：

<ul>
  <li class="parent">
    <ul class="children">
      <li class="active">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

我正在使用以下 Javascript 文件将样式应用于所有具有“活动”类的起始元素的“父级”类的父级：

function openList() {
  el = document.getElementsByClassName("active");
  while (el.parentNode) {
    el = el.parentNode;
    if (el.className === "parent") {
      el.style.display="block";
    }
  }
}

window.onload = openList();

它没有返回任何东西，也没有错误，但似乎正在运行。

标签： javascript

解决方案

代码有两个问题。

  • 列表项getElementsByClassName返回HTMLCollection您应该通过使用访问其第一个元素[0]
  • 您将 window.onload 设置return为功能openList。只是不要调用该函数，即删除()

注意：您声明el为全局变量。使用let var或const声明。

function openList() {
  let el = document.getElementsByClassName("active")[0];
  while (el.parentNode) {
    el = el.parentNode;
    if (el.className === "parent") {
      el.style.display="block";
    }
  }
}

window.onload = openList;
<ul>
  <li class="parent">
    <ul class="children">
      <li class="active">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

推荐阅读