javascript - 向嵌套列表中的父节点 (<a>) 添加类

Question

<a>最后里面<li>最里面的<ul>有一个名为 current 的类.它突出显示事件链接。

我想突出显示此链接的所有父链接。

HTML

<ul>
    <li>
        <a href="a.html">Samsung</a>
        <ul>
            <li>
                <a href="b.html">Galaxy</a>
                <ul>
                    <li>
                        <a href="c.html">Galaxy Note 4</a>
                    </li>
                    <li>
                        <a href="c.html" class="current">Galaxy S 5</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Galaxy S 5 具有类 current ，但我还想添加类 current到父链接(Samsung、Galaxy)。

Answer 1

1. 通过给它一个 id 来定义最外层的父元素。
2. 获取具有当前类的元素并将其分配给临时变量。
3. 遍历以当前元素开始的元素，并将临时变量的值更改为 temp.parentNode。如果元素父节点是列表项，则将当前类添加到列表元素的第一个子元素。

var until = document.getElementById("list"),
    crnt = document.getElementsByClassName('current'),
    tmp = crnt.item(0);

while(tmp !== until) {
  if(tmp.tagName === "LI") {
    tmp.children.item(0).classList.add("current");
  }
  tmp = tmp.parentNode;
}

.current {
  color: tomato;
}

<ul id="list">
  <li>
    <a href="a.html">Samsung</a>
    <ul>
      <li>
        <a href="b.html">Galaxy</a>
        <ul>
          <li>
            <a href="c.html">Galaxy Note 4</a>
          </li>
          <li>
            <a href="c.html" class="current">Galaxy S 5</a>
          </li>
        </ul>
      </li>
    </ul>
  </li> 
</ul>