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

debugcn 发表于 Dev

佩莱2010

嘿嘿

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

马蒙

要引用特定元素，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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。