jquery - 将类添加到第二个列表项

Question

我正在尝试将一个类添加到无序列表的第二个列表元素，但它不起作用，即使我可以将相同的类添加到第一个列表元素，有人能告诉我哪里出错了吗，非常感谢前进!<​​/p>

var url = "http://myshop.com/about-us/"; // window.location.href;
if (url == 'https://myshop.com/') {
  $("ul.menu.low li a:first").addClass("active white");
}
if (url.search("about-us") >= 0) {
  $("ul.menu.low li a:nth-child(2)").addClass("active red");
}

a.active.red {
  border: 2px solid red;
  max-width: 70px;
  color: red !important;
}

a.active.white {
  border: 2px solid #fff;
  max-width: 70px;
  color: #fff !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu low">
  <li><a href="http://myshop.com/" target="_self">Home</a></li>
  <li> <a href="http://myshop.com/about-us/" target="_self">About</a>
    <ul>
      <li><a href="http://myshop.com/hi" target="_self"><span>Hi</span></a></li>
      <li><a href="http://myshop.com/bye" target="_self"><span>Bye</span></a></li>
    </ul>
  </li>
</ul>

Answer 1

您没有将第 n 个子级应用到选择器的正确部分。

您的选择器针对 nth-child那是一个<a>标签，您应该将其应用于 <li>标签

试试这个:

$("ul.menu.low li:nth-child(2) a").addClass("active red");

这将针对两个 <ul> 的第二个 child .如果您打算只针对第一个 ul，那么也可以使用后代选择器:

$("ul.menu.low > li:nth-child(2) > a").addClass("active red");

这样您将只针对“关于”li，而不是“再见”li。

同样，您可以使用 .eq选择第二个元素的方法，而不是使用 CSS 选择器:

$("ul.menu.low > li").eq(2).addClass("active red");