How to get child by index in jQuery?

Question

<div class="second"> <div class="selector" id="selFirst"></div> <div class="selector" id="selSecond"></div> <div></div> </div> 

How to get #selFirst using an element index, not an identifier?

 var $selFirst = $(".second:nth-child(1)"); console.log($selFirst); 

returns:

 jQuery(div.second) 

Answer 1

If you know the child that interests you, this is the first:

  $('.second').children().first(); 

Or find by index:

  $('.second').children().eq(0); 

Answer 2

There is the following way to select the first child

  1) $ ('. Second div: first-child') 

  2) $ ('. Second *: first-child') 

  3) $ ('div: first-child', '.second') 

  4) $ ('*: first-child', '.second') 

  5) $ ('. Second div: nth-child (1)') 

  6) $ ('. Second'). Children (). First () 

  7) $ ('. Second'). Children (). Eq (0) 

Answer 3

You can get the first element through an index selector:

 $('div.second div:eq(0)') 

Code: http://jsfiddle.net/RX46D/

Answer 4

 $('.second').find('div:first') 

Answer 5

Doesn't nth-child return siblings, not children?

 var $selFirst = $(".second:nth-child(1)"); 

will return the first element with class ".second".

 var $selFirst = $(".selector:nth-child(1)"); 

should give you the first class brother '.selector'

Answer 6

var node = document.getElementsByClassName("second")[0].firstElementChild

Disclaimer: Browser compatibility on getElementsByClassName and firstElementChild unstable. DOM pads fix these problems.