Menu
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?
241
Check out this previous answer HERE.
It uses
var i = 0;
while( (child = child.previousSibling) != null )
i++;
//at the end i will contain the index.
When you say "number", do you mean 1, 2, etc or "one", "two", etc?
If 1, 2, etc, then the number is simply i+1...
If "one", "two", etc, then you need to get the text inside the element, then probably use a Regexp to parse it and get the value you want.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
