How to target multiple data attribute at once

user_14393450 0
Viewed 121

I have a list of products where i want to target them using the attribute "data-ga-product" which is unique for each product. What i want to achieve is to insert a span with a message like "New In" to these products I'm targeting.

I've got this working if I do this separately but can you target several products at once so there's no need for duplication of code? I've tried the below but it only targets the first selector, or is there a better way of doing what I'm trying to achieve?

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

attributes arrays javascript
1 Answers

Don't think there is a way to look for a value in a array variable when working with querySelector().

You can conditionally insert your element inside your forEach() though, if you want concise code.

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

Note : I use ... to convert the NodeList (returned by querySelectorAll()) to an array. forEach() method is also implemented on the NodeList, but quoting the docs :

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

user_101401240
Related