get the nth-child number of an element in jquery

Question

I have a class of multiple 'DIV' elements and inside it are list of 'p' elements. See below:

<div class="container">     <p>This is content 1</p>     <p>This is content 2</p>     <p>This is content 3</p> </div> <div class="container">     <p>This is content 1</p>     <p>This is content 2</p>     <p>This is content 3</p> </div> 

Here's my jQuery code on calling the 'p' elements through hover:

$('.container').children('p').hover(function(){     //get the nth child of p from parent class 'container' }); 

How can I get the nth child number of the element 'p' from its parent container class 'container'?

Like if you hover

This is content 1

it should trigger output as 1;

Answer 1

You can use jQuery's index function for that. It tells you where the given element is relative to its siblings:

var index = $(this).index(); 

Live example | source

The indexes are 0-based, so if you're looking for a 1-based index (e.g., where the first one is 1 rather than 0), just add one to it:

var index = $(this).index() + 1; 

---

If you're not using jQuery and came across this question and answer (the OP was using jQuery), this is also quite simple to do without it. nth-child only considers elements, so:

function findChildIndex(node) {     var index = 1;                         // nth-child starts with 1 = first child     // (You could argue that you should throw an exception here if the     // `node` passed in is not an element [e.g., is a text node etc.]     // or null.)     while (node.previousSibling) {         node = node.previousSibling;         if (node && node.nodeType === 1) { // 1 = element             ++index;         }     }     return index; } 

Answer 2

Use the parameter-less version of the .index() method to find the position of the element relative to its siblings:

$('.container').children('p').hover(function() {      var index = $(this).index() + 1; }); 

Note that the result of .index() will be zero-based, not one-based, hence the + 1