Question

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

这是我当前正在使用的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文件将样式应用于开始元素为“ active”的所有父元素为“ parent”的父类：

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

window.onload = openList();

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

Answer 1

代码有两个问题。

列表项getElementsByClassName返回HTMLCollection，您应该使用[0]来访问其第一个元素
您将window.onload设置为功能return的{{1}}。只是不要调用该函数，即删除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;

Answer 2

首先，您要调用该函数并将其返回的值分配给

querySelector（），最近的（）和classList将是处理此问题的最佳方法

document.querySelector("li.active")
  .closest(".parent")
    .classList
      .add("open");

li.parent {
  display: none;
}

li.parent.open {
  display: block;
}

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

如果有多个

document.querySelectorAll("li.active").forEach(element =>
  element
   .closest(".parent")
    .classList
      .add("open")
)

li.parent {
  display: none;
}

li.parent.open {
  display: block;
}

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

Answer 3

function openList() {
  
  let el = document.getElementsByClassName("parent");
  Array.prototype.forEach.call(el,(parentNode)=>{
    if(parentNode.getElementsByClassName('active').length>0){
         parentNode.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>

我之所以提出这种方法，是因为它可能具有更好的运行时行为

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

3 个答案: