javascript - How to style specific a tag

Question

I have a lot of links look something like this:

<a href="http://www.youtube.com/user/nigahiga">Youtube</a>
<a href="http://pinterest.com/pin/41236152807615600/">Pinterest</a>
<a href="https://www.facebook.com/manchesterunited">Facebook</a>
<a href="http://www.youtube.com/user/RayWilliamJohnson">Youtube</a> 
<a href="http://pinterest.com/pin/24910604158520050/">Pinterest</a>

How can I style only the hyperlinks that will be linked to pinterest. I tried this:

$('a').attr('href').contains('pinterest').css('Styling here');

But it does not work. How to achieve it?

Answer 1

您可以使用属性包含选择器：

$('a[href*="pinterest"]').css('color','DeepSkyBlue');

或者更好只需要纯 css：

a[href*="pinterest"] {  
    color: DeepSkyBlue;
} 

小提琴

Answer 2

  $('a[href*="pinterest"]').css('apply styles');

选择器文档可以在http://docs.jquery.com/Selectors找到

For attributes:

= is exactly equal
!= is not equal
^= is starts with
$= is ends with
*= is contains

Answer 3

您可以使用下一个选择器获取链接到 pinterest 的所有超链接：

$('a[href^="http://pinterest.com/"]')

该选择器将返回所有“a”元素，其中“href”属性以http://pinterest.com/开头

然后你可以给它们设置样式

Answer 4

除了属性包含解决方案（虽然不那么整洁），您还可以使用过滤器功能：

$('a').filter(function () {
    return $(this).attr("href").indexOf("pinterest") != -1;
}).css('color', 'red');

这是一个工作示例

Answer 5

您应该检查每个 a 的 href attr 值。

$('a').each(函数(){

if($(this).attr('href').contains('pinterest'))

$(this).css（你的风格）；

});