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

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:

我试图将div =“_ blank”添加到具有特定类名的div中的所有链接。我知道怎么用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?.

但我正在尝试使用类而不是IDS来复制相同的内容。如果没有jquery如何做到这一点的任何想法?

Thanks in davanced!

谢谢davanced!

4 个解决方案

#1

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

您可以使用querySelectorAll()并包含CSS选择器。因此,如果您的类名是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>

#2

Use querySelectorAll and loop just like you did.

使用querySelectorAll和循环就像你一样。

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

Or you can use getElementsByClassName and nested loops.

或者您可以使用getElementsByClassName和嵌套循环。

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

#3

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

你可以使用带有css表达式的document.querySelectorAll():

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:

或者(ab)使用数组原型:

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

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

您还应该考虑使用addEventListener而不是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);

#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

希望它有效

#1