Question

29

Get an element's nth-child number in pure JavaScript

rated 0 times [ 33] [ 4] / answers: 1 / hits: 66128 / 10 Years ago, thu, june 26, 2014, 12:00:00

I am making a function for my site where I set a data attribute which contains the nth-child number of that element.

My HTML markup:

<html>

<body>

    <section class=hardware>some text, nth-child is one</section>

    <section class=hardware>some text, nth-child is two</section>

    <section class=hardware>some text, nth-child is three</section>

    <section class=hardware>some text, nth-child is four</section>

    <section class=hardware>some text, nth-child is five</section>

</body>

</html>

My JavaScript so far:

var selector = document.getElementsByClassName('hardware');

for(var i = 0; i <= selector.length; i++) {

    var index = selector[i] //get the nth-child number here

    selector[i].dataset.number = index;

}

How can I get the nth-child number of an element with pure JavaScript (not jQuery), is this even possible in JavaScript?