javascript - 如何一次定位多个数据属性

Question

我有一个产品列表，我想使用每个产品唯一的属性“data-ga-product”来定位它们。我想要实现的是在我定位的这些产品中插入一个带有诸如“New In”之类的消息的跨度。
如果我单独执行此操作，我已经可以正常工作了，但是您可以同时针对多个产品，这样就不需要重复代码了吗？我已经尝试了以下但它只针对第一个选择器，或者有没有更好的方法来做我想要实现的目标？

// Attempt at targeting multiple data attributes at once
var targetProduct = document.querySelectorAll('[data-ga-product="04245"]','[data-ga-product="263743"]' ).forEach(function (el){
    el.insertAdjacentHTML("beforeend", "<span>New In</span>");
});


/*
Targeting each indivudally
var targetProduct = document.querySelector('[data-ga-product="04245"]');
targetProduct.insertAdjacentHTML("beforeend", "<span>New In</span>");
var targetProduct = document.querySelector('[data-ga-product="263743"]');
targetProduct.insertAdjacentHTML("beforeend", "<span>New In</span>");
*/

.container {padding: 5px 0;}

<article class="container" data-ga-product="04245">
  <div class="productContent">
    <a class="productTitle" href="#product1">Product 1</a>
    <div class="productPrice">€&nbsp;19,90</div>
  </div>
</article>

<article class="container" data-ga-product="05395">
  <div class="productContent">
    <a class="productTitle" href="#product2">Product 2</a>
    <div class="productPrice">€&nbsp;109,90</div>
  </div>
</article>

<article class="container" data-ga-product="263743">
  <div class="productContent">
    <a class="productTitle" href="#product3">Product 3</a>
    <div class="productPrice">€&nbsp;59,90</div>
  </div>
</article>

<article class="container" data-ga-product="60493">
  <div class="productContent">
    <a class="productTitle" href="#product4">Product 4</a>
    <div class="productPrice">€&nbsp;23,90</div>
  </div>
</article>

Answer 1

不要认为在使用 querySelector() 时可以在数组变量中查找值.
您可以有条件地将您的元素插入您的 forEach()不过，如果你想要简洁的代码。

// Attempt at creating this as an array
var targetProduct = [...document.querySelectorAll('[data-ga-product]')].forEach(function (el){
if(['04245' , '263743'].indexOf(el.getAttribute('data-ga-product')) > -1)    
el.querySelector('.productTitle').insertAdjacentHTML("afterend", "<span>New In</span>");
});

.container {padding: 5px 0;}

<article class="container" data-ga-product="04245">
  <div class="productContent">
    <a class="productTitle" href="#product1">Product 1</a>
    <div class="productPrice">€&nbsp;19,90</div>
  </div>
</article>

<article class="container" data-ga-product="05395">
  <div class="productContent">
    <a class="productTitle" href="#product2">Product 2</a>
    <div class="productPrice">€&nbsp;109,90</div>
  </div>
</article>

<article class="container" data-ga-product="263743">
  <div class="productContent">
    <a class="productTitle" href="#product3">Product 3</a>
    <div class="productPrice">€&nbsp;59,90</div>
  </div>
</article>

<article class="container" data-ga-product="60493">
  <div class="productContent">
    <a class="productTitle" href="#product4">Product 4</a>
    <div class="productPrice">€&nbsp;23,90</div>
  </div>
</article>

注意:我使用 ...转换 NodeList (由 querySelectorAll() 返回)到一个数组。 forEach()方法也在 NodeList上实现了，但引用文档:

However, some older browsers have not implemented NodeList.forEach()