javascript - 对于字符串替换，For 循环无法按预期工作

Question

我正在尝试制作一个添加几个数字的javascript webextension，例如。“123”到购物网站上每个产品的超链接文本的内部文本的末尾，例如。http://www.tomleemusic.ca

例如，如果我去这个链接，http ://tomleemusic.ca/catalogsearch/result/?cat=0&q=piano

我想将商品的识别号添加到产品名称的末尾。

产品名称和 href 标签位于其项目链接 tomleemusic.ca/xxxxxx 中，其中 x 是项目编号

但是，使用以下代码，我只需将列表中第一项的项目编号附加到每个项目，而不是每个项目的不同项目编号。

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

标签： javascriptjqueryfor-loopgoogle-chrome-extension

Answer 1

在这一行中，您只获取第一个匹配元素：

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>