How to get the nth-child value in pure javascript

Question

Hi !

I have a parent element with four children. Four is as of now, as long as the number of children is determined by a MySQL database and a PHP script.

<aside class="offre-liste-container">
<div class="offre-liste-element" onclick="test2(this)">Blabla1</div>
<div class="offre-liste-element" onclick="test2(this)">Blabla2</div>
<div class="offre-liste-element" onclick="test2(this)">Blabla3</div>
<div class="offre-liste-element" onclick="test2(this)">Blabla4</div>
</aside>

I would like to have a function that return (or log in console) the nth-child value of the clicked element.

With an example : if I click on the Blabla2 div, the function should return 2. if I click on the Blabla3 or Blabla4 div, the function should respectively return 3 and 4.

Do someone know how to get that data in pure JavaScript ?

Many thanks by advance ! :)

score 0 · Accepted Answer · answered Apr 28 '20 at 13:05

You can do something like this

 let parent = document.querySelector('.offre-liste-container');
        let elements = document.querySelectorAll('.offre-liste-element');

        parent.addEventListener('click', function(e){
            if (e.target.className == 'offre-liste-element') {
                alert(`This is ${[...elements].indexOf(e.target) + 1} element`)
            }
        })

<aside class="offre-liste-container">
        <div class="offre-liste-element" >Blabla1</div>
        <div class="offre-liste-element">Blabla2</div>
        <div class="offre-liste-element" >Blabla3</div>
        <div class="offre-liste-element">Blabla4</div>
    </aside>

How to get the nth-child value in pure javascript

1 Answers1