So I have this HTML here generated by WordPress. I want to select the DIVs seperately using JS. Is this possible? Can I maybe select them by the order on which JS finds them in my HTML?

I tried if something like this would be possible (By adding an index number) but I believe that is used only for the LI element. But you get the idea.

var koffie = document.getElementsByClassName("g-gridstatistic-item-text2")[0];
var brain = document.getElementsByClassName("g-gridstatistic-item-text2")[1];
var tevred = document.getElementsByClassName("g-gridstatistic-item-text2")[2];

console.log(koffie);
console.log(brain);
console.log(tevred);
<div class="g-gridstatistic-wrapper g-gridstatistic-3cols">
    <div class="g-gridstatistic-item">
    <div class="g-gridstatistic-item-wrapper">
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="4"></div>
    <div class="g-gridstatistic-item-text2">Kopjes koffie per dag</div>
    </div>
    </div>
    <div class="g-gridstatistic-item">
    <div class="g-gridstatistic-item-wrapper">
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="14"></div>
    <div class="g-gridstatistic-item-text2">Brainstormsessies per week</div>
    </div>
    </div>
    <div class="g-gridstatistic-item">
    <div class="g-gridstatistic-item-wrapper">
    <div class="g-gridstatistic-item-text1 odometer" data-odometer-value="12"></div>
    <div class="g-gridstatistic-item-text2">Tevreden klanten</div>
    </div>

Read more here: Can I select classes by order like this?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: