Как изменить объект, который передает условный оператор

Question

Я новичок в JS и jQuery, и это мой первый вопрос, надеюсь, я проясню:

У меня есть список <a>и я хочу применить стиль только к тому, чей href такой же, как URL.

Я попытался упростить мой HTML, чтобы показать вам, что-то вроде этого:

<a href="/myWeb/001.html"></a>
<a href="/myWeb/002.html"></a>
<a href="/myWeb/003.html"></a>
<a href="/myWeb/004.html"></a>

Затем вот что я начал в своем скрипте (с jQuery):

var url = window.location.pathname;

if($('a').attr('href') === url){

  //and now I want to apply .css() only to the <a> that passes the condition

}

Итак, разочаровывает, что я не могу достичь, чтобы атаковать нужный объект, и я думаю, что это больше, чем просто:/, любой совет?

Благодарю.

Answer 1

Сила с вами, если у вас есть силы CSS.

Просто выберите только это a:

$("a[href="+url+"]")

Это делается с помощью селектора атрибутов из CSS.

Тогда идти вперед и сделать свой .css() магия:

$("a[href="+url+"]").css(/*whatever you desire*/);

Это будет работать для относительных URL-адресов, подобных тем, которые вы указали в своем коде.

Чтобы сделать это также безопасным для URL-адресов, таких как //code.google.com/whatever/abc.html вам нужно передать URL, заключенный в одинарные кавычки:

$("a[href='"+url+"']")

Answer 2

Посмотрите на фильтр jQuery ().

var url = "/myWeb/004.html";

$("a").filter(function() {
    return $(this).attr("href") === url;
}).css("background-color", "red");

Вот JSFiddle.

Answer 3

Использование filter() вместо:

var url = window.location.pathname;

$('a[href]').filter(function() { return this.href === url; } ).css({
   ...
});