Question

我正在尝试将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');
  }
}

但是我正在尝试使用类而不是IDS来复制它。如果没有jquery怎么做的任何想法？。

感谢davanced！

Answer 1

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

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

或（ab）使用数组原型：

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

您还应该考虑使用addEventListener代替window.onload：

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

或者更合适：

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

您还可以使用旧学校<base>元素，该元素可以为所有标记设置默认值：

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

Answer 2

使用querySelectorAll并像你一样循环播放。

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

或者您可以使用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');
    }
}

Answer 3

您可以使用querySelectorAll（）并包含CSS选择器。因此，如果您的班级名称是link-other：

＆＃13;

document.querySelectorAll('.link-other a')
  .forEach(function(elem) {
    elem.setAttribute('target', '_blank');
  })

＆＃13;

<div class="link-other"> 
  <a href="http://wikipedia.com">Wikipedia</a>
  <a href="http://google.com">Google</a>
</div>

＆＃13;

Answer 4

要达到预期效果，请使用以下选项

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

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

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

希望它有效

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

4 个答案: