CODEWITHSUNDEEP
javascriptjquery
prad
prad

Reputation: 51

Adding a class with multiple links in jquery

I'm adding an background image for third party links with filter function like this

$("a").filter(function () {
                var ignoreLink =
        this.hostname == location.hostname // disregard same domain
        || this.href.match(/^(mailto|tel|javascript)\:/)
                return !ignoreLink;
            }).addClass("externalanchor").attr("target", "_blank");

the above code works fine now i have a requirement saying that some of the links should be internal ex: 

<p><a href="https://www.google.com/" target="_blank">Email URL</a></p>
<p><a href="https://github.com/" target="_blank">Google</a></p>
<p><a href="https://www.w3schools.com" target="_blank">Google</a></p>
<p><a href="https://www.codecademy.com" target="_blank">Google</a></p>

my question is How to add a class for this links separate with out a dom change only with jquery.

Upvotes: 2

Views: 347

Answers (2)

TriForce
TriForce

Reputation: 415

Maybe something like this works for you?:

https://jsfiddle.net/khkmmjjn/1/

Code:

$("a").each(function(){

  if( $(this).attr("href").indexOf("https://jsfiddle.net") == 0 || 
     $(this).attr("href").indexOf("jsfiddle.net") == 0 )
  {
    $(this).addClass("local");
  }
  else if( $(this).attr("href").indexOf("mailto:") == 0 || 
     $(this).attr("href").indexOf("tel:") == 0 )
  {
    $(this).addClass("other");
  }
  else
  {
    $(this).addClass("external");
  }

});

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

You can use attribute contains selector

$("a[href*='google.com'], a[href*='w3schools.com'], a[href*='codeacademy.com']").addClass('no-external');

Upvotes: 2

Related Questions