我正在尝试制作一个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);
}
答案 0 :(得分:3)
在这一行中,您仅获取第一个匹配元素:
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>
答案 1 :(得分:2)
querySelector
将始终返回 first 匹配元素。因此,当您这样做
var addon = document.querySelector(".products-grid .item .product-name a:not(.product-image)").getAttribute('href');
您选择的是 first a
(您在第一次迭代中得到的那个)。
但是,通过使用数组方法和正则表达式来匹配id
,可以使代码更加整洁:
Array.prototype.forEach.call(
document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)"),
(productNameElement) => {
const idMatch = productNameElement.href.match(/\d+$/);
if (idMatch) productNameElement.appendChild(document.createTextNode(idMatch[0]));
});
还要注意,只有 some 个元素具有ID号。例如,搜索结果之一:
<a href="http://tomleemusic.ca/benchworld-sonata-1c-single-adjustable-artist-piano-bench-in-polished-walnut" title="BENCHWORLD SONATA 1c Single Adjustable Artist Piano Bench In Polished Walnut">BENCHWORLD SONATA 1c Single Adjustable Artist <span class="searchindex-highlight">Piano</span> Bench In Polished Walnut</a>
没有一个,因此最好先检查是否有比赛。