Expand my Community achievements bar.

Join us on September 25th for a must-attend webinar featuring Adobe Experience Maker winner Anish Raul. Discover how leading enterprises are adopting AI into their workflows securely, responsibly, and at scale.
SOLVED

CSS Selecting For Each

Avatar

Level 2

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?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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

View solution in original post

2 Replies

Avatar

Correct answer by
Employee Advisor

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

Avatar

Level 1

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