时间戳

首页 > 解决方案 > JavaScript QuerySelector 不返回最后一个孩子

javascript - JavaScript QuerySelector 不返回最后一个孩子

问题描述

我正在尝试选择 .nav-item 类的最后一个子元素，并且我已经尝试了几种方法。它不抓取项目，只返回“null”，应用样式将抓取第一个项目或返回以下错误：

main.js:25 未捕获的类型错误：无法在 main.js:25 处读取 null 的属性“样式”

我的代码：

顶部工作正常并且确实应用了边框，但我想在最后一个项目的右侧应用一个边框，在第一个项目的左侧应用一个边框。最后一项不起作用。

谁能指出我的错误？HTML 如果有帮助：

let items = document.querySelectorAll('.nav-item');

for (let i = 0; i < items.length; i++) {
  items[i].style.borderTop = '0.2em solid white';
  items[i].style.borderBottom = '0.2em solid white';
}

// First and Last Item
// var secondItem = document.querySelector('.list-group-item:nth-child(2)');
// secondItem.style.color = 'coral';

let lastItem = document.querySelector('.nav-item:nth-child(4)');

console.log(lastItem);

lastItem.style.borderRight = '0.2em solid white';
<nav>
  <h1>Item Lister</h1>
  <ul class="nav" id="list">
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
  </ul>
</nav>

标签： javascript

解决方案

所以你的<nav>元素有一个孩子：<ul>. 这些<a>元素是<ul>.

要解决此问题，您需要 querySelect .nav-item ul:nth-child(4)。

这里有一些东西可以更好地可视化它。The<nav>是s<ul>的父级，谁是<a>s 的父级。这使得<nav>祖父母成为<a>s。

nav
  ul
    a
      li
    a
      li
    a
      li
    a
      li

像 Karl-André Gagnon 所说的确保<li>是 的孩子也很重要<ul>：

nav
  ul
    li
      a
    li
      a
    li
      a
    li
      a

推荐阅读