检查锚点是否与jQuery有特定的URL，没有重复

Question

Heyo，

我当前正在尝试创建一个脚本，以检查if中的一个anchor-elements是否具有特定的url。我已经尝试过了，但是对我来说根本没有用。我想念什么？

var url =  '/right_url';

if ($('a').attr('href') == url ) {
  $(this).addClass('active');
}

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="#">Test 1</a></li>
    <li><a class="test" href="/right_url">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
  </ul>
</nav>

Answer 1

要用this引用特定元素，必须遍历所有元素，以便可以检查属性：

var url =  '/right_url';
$('a').each(function(){
  if ($(this).attr('href') == url ) {
    $(this).addClass('active');
  }
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="#">Test 1</a></li>
    <li><a class="test" href="/right_url">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
  </ul>
</nav>

尽管我认为您不需要使用循环并使用this即可实现所需的功能。您只需在选择器中使用 href 属性即可添加 class ：

var url =  '/right_url';
$(`a[href='${url}'`).addClass('active');

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="#">Test 1</a></li>
    <li><a class="test" href="/right_url">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
  </ul>
</nav>

Answer 2

尝试关注

var url =  'right_url';
$('a[href='+url+']').addClass('active');

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="#">Test 1</a></li>
    <li><a class="test" href="right_url">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
  </ul>
</nav>