Добавить класс ко второму элементу списка

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-потомок к правильной части селектора.

Ваш селектор нацелен на nth-child, который является тегом <a>, где, как и следовало бы, применять его к<li> tag

Попробуйте вместо этого:

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

Это будет предназначено для обоих 2-х детей обоих <ul>.Если вы намереваетесь нацелиться только на первый ul, используйте также селектор-потомок:

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

Таким образом, вы нацеливаетесь только на "About" li, но не на "Bye".

Точно так же вы можете использовать метод .eq для выбора 2-го элемента вместо использования селектора CSS:

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

Answer 2

Попробуйте это:

$('.menu.low a').each(function(){
    if($(this).attr('href') === window.location.href){
        $(this).addClass('active red');
    }

})

Answer 3

Добавьте эту строку в свой код

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