CODEWITHSUNDEEP
javascriptclasshyperlinktarget
user2965583
user2965583

Reputation: 131

How do I add target=“_blank” to a link within a div with an specific class name?

I´m trying to add target=“_blank” to all the links within the divs with an specific class name. I know how to do it with an ID:

window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
  }
}

But i´m trying to replicate the same, using classes instead of IDS. Any ideas of a how to do this without jquery?.

Thanks in davanced!

Upvotes: 0

Views: 4341

Answers (4)

Martin
Martin

Reputation: 16292

You can use querySelectorAll() and include a CSS selector. So if your class name is link-other:

document.querySelectorAll('.link-other a')
  .forEach(function(elem) {
    elem.setAttribute('target', '_blank');
  }) 
<div class="link-other"> 
  <a href="http://wikipedia.com">Wikipedia</a>
  <a href="http://google.com">Google</a>
</div>

Upvotes: 2

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve your expected result use below option 

        var addList = document.querySelectorAll('.link_other a');

    for(var i in addList){
     addList[i].setAttribute('target', '_blank');
    }

Codepen - http://codepen.io/nagasai/pen/QEEvPR

Hope it works

Upvotes: 0

Andreas Louv
Andreas Louv

Reputation: 47099

You can use document.querySelectorAll() which takes a css expression:

var anchors = document.querySelectorAll('.my_class a');
for (var i=0; i<anchors.length; i++){
  anchors[i].setAttribute('target', '_blank');
}

Or (ab)using the array prototype:

[].forEach.call(document.querySelectorAll('.my_class a'), function(el) {
  el.setAttribute('target', '_blank');
});

You should also consider using addEventListener instead of window.onload:

window.addEventListener('load', function() {
  // ...
});

Or the more appropriate:

document.addEventListener('DOMContentLoaded', function() {
  // ...
});

You can also use the old school <base> element which will can set defaults for all a tags:

var base_el = document.createElement('base');
base_el.setAttribute('target', '_blank');
document.head.appendChild(base_el);

Upvotes: 0

Barmar
Barmar

Reputation: 781058

Use querySelectorAll and loop just like you did.

var anchors = document.querySelectorAll(".link_other a");

Or you can use getElementsByClassName and nested loops.

var parents = document.getElementsByClassName(".link_other");
for (var i = 0; i < parents.length; i++) {
    var anchors = parents[i].getElementsByTagName("a");
    for (var j = 0; j < anchors.length; j++) {
        anchors[j].setAttribute('target', '_blank');
    }
}

Upvotes: 0

Related Questions