将课程添加到第二个列表项

Question

我试图将一个类添加到无序列表的第二个列表元素中，但是即使我可以将相同的类添加到第一个列表元素中，该类也无法正常工作，有人可以告诉我我哪里出错了，在此先感谢！

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

您没有将nth-child应用于选择器的正确部分。

您的选择器定位nth-child到的是<a>标签，您应该将其应用于<li>标签

尝试以下方法：

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

这将针对两个的两个孩子<ul>。如果仅打算将第一个ul作为目标，则也可以使用后代选择器：

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

这样，您将只定位“关于” li，而不定位“再见”。

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

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