我的 html 页面中有 100 个带有“导航链接”类的锚标签，我想隐藏前 95 个，页面加载后只显示最后 5 个

Question

我的 html 页面中有 100 个带有“nav-link”类的锚标签，我想隐藏前 95 个锚标签，只显示最后五个，页面加载后如何在 javascript 中执行此操作。

例如

<a href='#' class="nav-link">Lab Report</a> 
<a href='#' class="nav-link">Pathology Report</a>
<a href='#' class="nav-link">Radiology Report</a>
.
.
.
<a href='#' class="nav-link">Pathology Report</a>

我目前正在将此代码与 chrome scripty 扩展一起使用

const navLinks = document.getElementsByClassName('nav-link');

// Loop through all the anchor tags
for (let i = 0; i < navLinks.length; i++) {
  // Hide all the anchors except the last 5
  if (i < navLinks.length - 15) {
    navLinks[i].style.display = 'none';
  }
}

但想检查更简单的方法来做到这一点。我实际上在一个边栏很长的网站上工作，我正在使用脚本扩展来添加脚本，这样我就不必在每次刷新页面时都滚动栏。

Answer 1

1. 将 NodeList 转换为数组
2. 使用

   .slice()

   提取除最后5
之外的所有内容
3. 迭代余数并设置样式

Array.from(document.querySelectorAll(".nav-link"))
  .slice(0, -5)
  .forEach((link) => (link.style.display = "none"));