Change style of an element which contains a specified word

Question

I want to change style of an element which contains a specified word in href.

jquery

jQuery('a:contains("afyon")').css('color': '#fff');

html

<div class="saglink"><a title="bayan adana" href="http://www.site.co/adana-bayan/">Adana bayan</a></div>
<div class="saglink"><a title="bayan adiyaman" href="http://www.site.co/adiyaman-bayan/">Adıyaman bayan</a></div>
<div class="saglink"><a title="bayan afyon" href="http://www.site.co/afyon-bayan/">Afyon bayan</a></div>
<div class="saglink"><a title="bayan aksaray" href="http://www.site.co/aksaray-bayan/">Aksaray bayan</a></div>

What is the correct way to do that ?

Answer 1

You need to use attribute contains selector:

jQuery('a[href*=afyon]').css('color', '#fff');

Answer 2

You could use filter() and return all elements whose href value contains a specific word. You should also convert the string to lower case in order to get all possible matches.

Example Here

$('a').filter(function(){
    return $(this).prop('href').toLowerCase().indexOf('afyon') > -1;
}).css('color', '#fff');