javascript - 检查锚点是否具有特定的 url 与 jQuery 没有重复

Question

嘿嘿，

我目前正在尝试创建一个脚本来检查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>

标签： javascriptjquery

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属性来添加类：

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>