CSS Selecting For Each | Community
Skip to main content
M
Motoed-Work
Level 2
October 30, 2024
Solved

CSS Selecting For Each

  • October 30, 2024
  • 2 replies
  • 670 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by dwright-adobe

    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

    2 replies

    D
    Adobe Employee
    dwright-adobeAdobe EmployeeAccepted solution
    Adobe Employee
    October 31, 2024

    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

      V
      virenishere
      November 24, 2024

      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

      Terms & ConditionsAccessibility statement

      Loading footer...