How to target multiple data attribute at once

Question

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>

Answer 1

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