Question

I have a stack of divs that belong to a specific class, say tabs. and the semantic structure looks something like this:

<div class = "tabs" >_______</div>
<div class = "tabs" >_______</div>
<div class = "tabs" >_____</div>

It’s easy to access the first and the last element of the div like

$('.tabs:first') or
$('.tabs:last')

but getting to the 2nd (and assuming there are multiple other divs inside then the all divs other than first or last) seems to yield a syntax error to me such as :

$('.tabs:second') or $('.tabs:third') do not work expectedly.

Can anyone pinpoint what is wrong here?

Answer 1

Take a look at the jQuery :first selector documentation:
http://api.jquery.com/first-selector/

You’ll notice that this is a jQuery extension and not part of the CSS specification.
Also that :first is equivalent to :eq(0), that means if you want to get the second element, you can do it with :eq(1).

If you don’t need a filter in the CSS selector, you can simply get the element with the .eq method like this:

$('.tabs').eq(0) // get the first element
$('.tabs').eq(1) // get the second element
$('.tabs').eq(2) // get the third element
$('.tabs').eq(-2) // get the second to last element
$('.tabs').eq(-1) // get the last element