jquery - 匹配来自 2 个数组的信息，如果匹配则添加类

Question

我有一些存在于 ul 中的元素，我想将它们与当前 URL 位置进行比较，如果匹配，则将一个类(事件)添加到特定的 li。我想我有所有的部分，但我似乎无法让他们完成所有工作。一起。我正在获取当前路径中的所有元素，获取导航结构中的所有元素(但还没有使用它，因为我不确定如何使用)。现在我正在使用一个开关将它添加到 li:child(n)，但这似乎非常严格。有没有更有效的方法来实现我想要做的事情？

<ul class="nav-items">
   <li><a href="/About">About</a></li>
   <li class="active"><a href="/News">News</a></li>
   <li><a href="/Programs">Programs</a></li>
   <li><a href="/Public-Policy">Public Policy</a></li>
   <li><a href="/Events">Events</a></li>
   <li><a href="/Benefits">Benefits</a></li>
   <li><a href="/Education">Education</a></li>
</ul>

JS:

  var pathArray = window.location.pathname.split( '/' );
  var navArray = $('.nav-items li a').map(function(i, el) {
    return $(el).text();}).get();//<--not sure how to use this just yet

  switch(pathArray[1]) {
    case "About":
        $('.nav-items li:nth-child(1)').addClass('active');
      break;
      case "News":
        $('.nav-items li:nth-child(2)').addClass('active');
      break;
      case "Programs":
        $('.nav-items li:nth-child(3)').addClass('active');
      break;
      case "Public-Policy":
        $('.nav-items li:nth-child(4)').addClass('active');
      break;
      case "Events":
        $('.nav-items li:nth-child(5)').addClass('active');
      break;
      case "Benefits":
        $('.nav-items li:nth-child(6)').addClass('active');
      break;
      case "Education":
        $('.nav-items li:nth-child(7)').addClass('active');
      break;
  }

Answer 1

您应该使用 jQuery 的 .eq() 方法，因为它是从零开始的。然后可以将其输入路径名数组中的索引(也是从零开始的)。

请注意，这不适用于 Public Policy 元素，因为 URL 将为 Public-Policy，并且不会匹配。您可能想尝试比较 URL。

var pathArray = window.location.pathname.split('/');
pathArray = 'example.com/About'.split('/'); // because snippets don't have your URL
var navArray = $('.nav-items li a').map(function(i, el) {
  return $(el).text();
}).get();

$('.nav-items li').eq(navArray.indexOf(pathArray[1])).addClass('active');

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav-items">
   <li><a href="/About">About</a></li>
   <li><a href="/News">News</a></li>
   <li><a href="/Programs">Programs</a></li>
   <li><a href="/Public-Policy">Public Policy</a></li>
   <li><a href="/Events">Events</a></li>
   <li><a href="/Benefits">Benefits</a></li>
   <li><a href="/Education">Education</a></li>
</ul>