Для цикла не работает должным образом с заменой строки

Question

Я пытаюсь сделать расширение javascript, которое добавляет пару цифр, например. «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);
}

Answer 1

querySelector всегда возвращает первый соответствующий элемент. Таким образом, когда вы делаете

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

Также обратите внимание, что только некоторые элементов имеют идентификационный номер. Например, один из результатов поиска:

<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>

не имеет такового, поэтому было бы хорошо проверить, что сначала есть совпадение.

Answer 2

В этой строке вы получаете только первый соответствующий элемент:

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>