CSS Selecting For Each

[Motoed-Work]

I have a segment of our search results where to code looks something like this

<div id="categoryBreadCrumbs">
<div class="criteria-header">Name of Category</div>
<div class="criteria-refinement">Category 1</div>
<div class="criteria-refinement">Category 2</div>
</div>

I have 2 data elements.
div#categoryBreadCrumbs div.criteria-header

div#categoryBreadCrumbs div.criteria-refinement

I have a rule that writes these two items to two different eVars. 
Trouble is... looking in debugger, it only reports Category 1 to the eVar for the refinement.  

I'm not seeing an easy way to do a "for each" style data element?
Is this possible to do or am I approaching it wrong?

[dwright · Accepted solution]

It sounds like you'd probably want to use a custom code data element that runs code using document.querySelectorAll(): https://www.w3schools.com/jsref/met_document_queryselectorall.asp

[virenishere]

Hey! 

I was checking solving some question on JS 

you could try these to access each data element

html
<div id="categoryBreadCrumbs">
<div class="criteria-header">Name of Category</div>
<div class="criteria-refinement">Category 1</div>
<div class="criteria-refinement">Category 2</div>
</div>


js
const divEl = document.querySelectorAll(".criteria-refinement")[0];
console.log(divEl)
output:- <div class="criteria-refinement">Category 1</div>

const divEl = document.querySelectorAll(".criteria-refinement")[1];
console.log(divEl)
output:- <div class="criteria-refinement">Category 2</div>


I hope that might works 🙂

Thanks Virender