Question

我想循环一些链接并在href中添加一个数字，所以它就像x.php&ref=333。

<div id="maindiv">
<span><a href="x.php&ref="></a></span>
<span><a href="x.php&ref="></a></span>
<span><a href="x.php&ref="></a></span>
</div>

如何在纯JavaScript中编写此内容？这是jQuery代码：

$('#maindiv a').each(function(){
var hr = $(this).attr('href');
$(this).attr('href' , hr+333 );
})

由于某种原因，我无法使用它，需要在纯JavaScript中编写代码。具体来说，我不知道如何获取每个a元素。

Answer 1

纯JS版本：

选项一

// Get div element. jQuery equivalent: $('#maindiv')
var mainDiv = document.getElementById("maindiv");

// Get all anchors in element. jQuery equivalent: $('#maindiv a') (or many others)
var myAnchors = mainDiv.getElementsByTagName("a");

// Loop through each anchor element and update href
for (var i = 0; i < myAnchors.length; i++) {
    myAnchors[i].href = myAnchors[i].href + "YourString";
}

选项二（稍微不那么可读）

// Get div element and corresponding anchors. jQuery equivalent: $('#maindiv a')
var myAnchors = document.getElementById("maindiv").getElementsByTagName("a");

// Loop through each anchor element and update href
for (var i = 0; i < myAnchors.length; i++) {
    myAnchors[i].href = myAnchors[i].href + "YourString";
}

其他信息

查看document.getElementById和element.getElementsByTagName ON MDN。

Answer 2

试试这个。

var anchors = document.getElementById("maindiv").getElementsByTagName("a");
for(var i = 0; i < anchors.length;i++){
    anchors[i].href = anchors[i].href + "333";
}

document.getElementById返回文档中具有匹配ID的元素。

document.getElementsByTagName返回文档中具有匹配标记的元素。但是如果你在上面已经选择的元素上调用getElementsByTagName，它将会在该元素中查找。

Answer 3

var els = document.querySelectorAll('#maindiv a');
for (var i = 0; i < els.length; i++ ) {
    var hr = els[i].href;
    els[i].href = hr + 333;
}

Answer 4

这应该是最干净的方法。

var links = document.getElementById('maindiv').getElementsByTagName('a');
for (i in links) {
  links[i].href = links[i].href + '333';
}

将代码从jquery转换为纯javascript

4 个答案: