如何将target =“ _ blank”添加到具有特定类名的div中的链接？

Question

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!

Answer 1

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> 

Answer 2

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);

Answer 3

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');
    }
}

Answer 4

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