我正在尝试制作一个 javascript 网络扩展,添加几个数字,例如。 “123”到购物网站上每个产品的超链接文本的内部文本末尾,例如。 http://www.tomleemusic.ca
例如,如果我转到此链接,http://tomleemusic.ca/catalogsearch/result/?cat=0&q=piano
我想将商品的标识号添加到产品名称的末尾。
但是,使用下面的代码,我只是将列表中第一项的项目编号附加到每个项目,而不是为每个项目添加不同的项目编号。
var productsListLink = document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)");
for (var i = 0; i < productsListLink.length; i++) {
var a = productsListLink[i];
var name = a.innerHTML || "";
var addon = document.querySelector(".products-grid .item .product-name a:not(.product-image)").getAttribute('href');
var newaddon = addon.replace("http://tomleemusic.ca/","");
name += newaddon;
a.innerHTML = name;
a.setAttribute('title', name);
}
最佳答案
在这一行中,您仅获取第一个匹配元素:
var addon = document.querySelector(".products-grid .item .product-name a:not(.product-image)").getAttribute('href')
您已经在 a
中的每次循环迭代中拥有了实际使用的元素;只需使用它即可:
var addon = a.getAttribute('href')
示例:
var productsListLink = document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)");
for (var i = 0; i < productsListLink.length; i++) {
var a = productsListLink[i];
var name = a.innerHTML || "";
var addon = a.getAttribute('href');
var newaddon = addon.replace("http://tomleemusic.ca/","");
name += newaddon;
a.innerHTML = name;
a.setAttribute('title', name);
}
<div class="products-grid">
<div class="item">
<span class="product-name">
<a href="http://tomleemusic.ca/1"></a>
</span>
</div>
<div class="item">
<span class="product-name">
<a href="http://tomleemusic.ca/2"></a>
</span>
</div>
<div class="item">
<span class="product-name">
<a href="http://tomleemusic.ca/3"></a>
</span>
</div>
</div>
关于javascript - For 循环在字符串替换时无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52233076/