23

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?

Improve this question
4
  • 1
    that is pure javascript no? Commented Jun 26, 2014 at 17:10
  • 1
    @bitoiu Yes it is, but how can I get the nth-child number? Commented Jun 26, 2014 at 17:11
  • 1
    If it's possible with jQuery, it's also possible without. Remember, jQuery is just a set of JS functions. It makes things easier, it doesn't add extra functionality. Commented Jun 26, 2014 at 18:20
  • Why to set "[object HTMLElement]" as data-number value? (selector[i].dataset.number = index;)? Commented Jun 1, 2019 at 2:24

7 Answers 7

Reset to default
7

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

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.

Improve this answer

2 Comments

Then i+1 is what you want.
@Sake Salverda: This only "works fine" when the entire set of elements returned by your getElementsByClassName() is contained under the same parent and there are no other child elements that could interfere with :nth-child(). But if you can always rely on that assumption, then i+1 will indeed suffice.
3

Simply incrementing the index linearly will only work if all the elements matching that class name are the only element children of the same parent, with no other elements that could interfere with :nth-child(), as shown exactly in the given markup. See this answer for an explanation on how other elements might interfere. Also review the Selectors spec on :nth-child().

One way to achieve this that is more foolproof is to loop through the child nodes of each element's parent node, incrementing a counter for each child node that is an element node (since :nth-child() only counts element nodes):

var selector = document.getElementsByClassName('hardware'); for (var i = 0; i < selector.length; i++) { var element = selector[i]; var child = element.parentNode.firstChild; var index = 0; while (true) { if (child.nodeType === Node.ELEMENT_NODE) { index++; } if (child === element || !child.nextSibling) { break; } child = child.nextSibling; } element.dataset.number = index; }

JSFiddle demo

Note that this will apply the correct index regardless of where the given element is in the DOM:

  • If a particular section.hardware element is the first and only child of a different section, it will be assigned the correct index of 1.

  • If a .hardware element is the second child of its parent, even if it is the only one with that class (i.e. it follows some other element without the class), it will be assigned the correct index of 2.

Improve this answer

Comments

2

I'm going to answer the questions with the following assumptions:

  • Your hardware classed elements are all siblings
  • You are interested in nth child not nth child + 1
  • They can be mixed with other elements:
<body> <section class="hardware">some text, nth-child is zero</section> <section class="software"></section> <section class="hardware">some text, nth-child is two</section> </body>

(I'm making these assumptions, because this is the problem I'm facing, thought it could be useful)

So the main difference is that instead of querying the elements that belong to a given class, I'm going to get the (direct) children of the body, and filter them.

Array.from(document.body.children) .map((element, index) => ({element, index})) .filter(({element}) => element.classList.contains('hardware'))

The resulting array will look like this:

[ {element: section.hardware, index: 0} {element: section.hardware, index: 2} ]
Improve this answer

1 Comment

"You are interested in nth child not nth child + 1" But nth-child is 1-indexed...
1 
[].slice.call(elem.parentElement.childNodes).indexOf(elem)
Improve this answer

Comments

1

Erik's answer is a hint to how easy the solution is in modern-day browsers, with one bug. childNodes includes text nodes, whitespace nodes, comment nodes, and will not translate into CSS compatible nth-child's. Here is a version that matches the CSS standard:

Array.from(elem.parentNode.children).indexOf(elem)+1

Keep in mind that CSS indexes are not zero-based but JS indexes are, hence adding 1.

Improve this answer

Comments

0

You can split the text at the spaces at get the last word from each split-array:

var hards = document.getElementsByClassName('hardware'); for (var i=0; i < hards.length; i++) { var hardText = hards[i].innerText || hard[i].textContent; var hardList = hardText.split(' '); var hardLast = hardList[hardList.length - 1]; alert(hardLast); }

I am using || here because Firefox does not support innerText, while IE does not support textContent.

If the elements only contain text then innerHTML can be used instead of innerText/textContent.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.