Get the number of nth child of a selected element

Question

I am trying to figure out how to get the number of nth child of a selected element. For example if I have:

<parent>
  <child>a</child>
  <child>b</child>
  <child>c</child>
  <child>d</child>
  <child>e</child>
</parent>

Then if I have:

$('child').click(function(){
  console.log($(this).nthChildOf('parent'));
});

And I like the console to output 3 if I click on c.

Thanks for the speedy answer. I have an added question. I find that if I use:

<parent>
  <child onclick="nthOf(this)">a</child>
  <child onclick="nthOf(this)">b</child>
  <child onclick="nthOf(this)">c</child>
  <child onclick="nthOf(this)">d</child>
  <child onclick="nthOf(this)">e</child>
</parent>

and then:

function nthOf(e) {
  console.log($('parent').index(e));
}

It will always output 1.

And if I do:

function nthOf(e) {
  console.log($('parent').index($(e)));
}

It will always output -1.

How do I fix this?

I think you can find what you are looking for in this link [jQuery: Get index of element as child relative to parent](http://stackoverflow.com/questions/4996002/jquery-get-index-of-element-as-child-relative-to-parent) — Ahmed Labib, Oct 12 '16 at 13:06
Check this image: http://resizeimage.net/viewimg/VCEOrMmRCMm4pEub/DGy32/console.png — Sunil Kumar, Oct 12 '16 at 13:29
@SunilKumar yes I forked it from the link and modified it so I can use `onclick` to activate it. — James Wayne, Oct 12 '16 at 13:31
Here is a PURE JavaScript solution: https://jsfiddle.net/MrPolywhirl/012s8g96/ — Mr. Polywhirl, Oct 12 '16 at 13:33

Mohd Abdul Mujib · Answer 1 · 2016-10-12T13:33:03.060

3

You can use .index() to get the number of element among its siblings.

$('child').click(function(){
  console.log($('child').index( this ) + 1);
});

DEMO

In reply to your recent comment, I dunno what you are trying to achieve, but if thats what you want i'll give it to you :D so as per your update to the question. Your function should be ...

function nthOf(e) {
  console.log($(e).parent().children().index(e) + 1);
}

DEMO

edited Oct 12 '16 at 13:33

answered Oct 12 '16 at 13:04

Mohd Abdul Mujib

13,071
8
64
88

1

Bear in mind that if OP wants `3` when clicking on `c`, they'll need to add 1 to that. Also there's no need to pass in `this`. – James Donnelly Oct 12 '16 at 13:05
Good catch there, James! I'll update the answer. – Mohd Abdul Mujib Oct 12 '16 at 13:06
it is always return: 0 – Sunil Kumar Oct 12 '16 at 13:09
@shushil Updated code. – Mohd Abdul Mujib Oct 12 '16 at 13:10
https://jsfiddle.net/rzq3r4tw/ – Sunil Kumar Oct 12 '16 at 13:12
Hey man I updated the question, can you take a look? Thanks. – James Wayne Oct 12 '16 at 13:14
@JamesWayne Why are you going for the inline js. When you can use event binding since you have `jQuery` included in your project. Just look at the demo that I linked to in my answer. – Mohd Abdul Mujib Oct 12 '16 at 13:18
@MohdAbdulMujib I have to use it because the click handler had been dedicated for another function. – James Wayne Oct 12 '16 at 13:24

Get the number of nth child of a selected element

1 Answers1