1

How to add a target=_blank attribute to an anchor tag, except a button and certain div. How do I not add target attribute to "call-control" class and ID with #?

I've tried this:

$('a:not(.call-control,"#")').attr('target', '_blank').addClass('checkMate');

/* then later... */
$('.checkMate').attr("target", "");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="call-control">
  <span id="incomingCallBrand"></span>
</div>
<div>
  <a href="#" class="comms-icon" id="iambusy"></a>
  <span>Peter</span>
</div>
Prabin Poudel
  • 73
  • 1
  • 1
  • 9
  • 3
    Please include your HTML to help [demonstrate the issue](https://stackoverflow.com/help/mcve). – showdev Aug 17 '17 at 00:34
  • 1. Add `target=_blank` to all of your `a` tag including `.call-control` and `#` ---------- 2. Select the `.call-control` and `#` and remove `target=_blank` attribute – trgiangvp3 Aug 17 '17 at 00:38

2 Answers2

1

If I understand correctly, you want to select an element that has neither the class "call-control" nor an href set to "#", using jQuery's .not() method.

To select elements without href set to "#", I suggest jQuery's "Attribute Equals" Selector:

.not([href=#])

Adding the class requirement:

.not([href=#],.call-control)

I also recommend removeAttr() as opposed to setting the target to a blank string.

Here's an example:

$('a:not([href=#],.call-control)').attr('target', '_blank').addClass('checkMate');

/* remove the attribute after one second */
setTimeout(function(){
    $('.checkMate').removeAttr('target');
},1000);
a {
  display: block;
}

.checkMate {
  background-color:pink;
}

/* to demonstrate when the target has been removed */
a[target=_blank] {
  background-color:lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="call-control">Class and HREF</a>
<a href="page.html" class="call-control">Just Class</a>
<a href="#">Just HREF</a>
<a href="http://example.com">Neither Class nor HREF</a>

For reference:
Add a class to a href that's set to '#'

showdev
  • 28,454
  • 37
  • 55
  • 73
0

Regardless of what specific links you're trying to select, your selector is invalid.

To apply the selection to any links that don't have a certain class, you're looking for $("a:not('.class')"):

To apply the selection to any links that don't have a certain class, you're looking for $("a:not('[href=#'])"):

These can be combined as $("a:not('.class-control, [href=#]')"):

$("a:not('.call-control, [href=#]')").attr("target", "_blank").addClass('checkMate');
.checkMate {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="call-control" href="#" rel="noopener noreferrer">Same Page (doesn't get the target)</a>
<br />
<a class="call-control" href="http://www.google.com" rel="noopener noreferrer">Google (doesn't get the target)</a>
<br />
<a href="http://www.facebook.com" rel="noopener noreferrer">Facebook (gets the target)</a>

Also, it's important to note that target=_blank has a significant security vulnerability, which can be exploited with window.opener(). This can be seen here. To fix this, you also need to add rel="noopener noreferrer" to your links (as above).

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71