Jquery select first and last divs from a list of items.

Question

Hi, how do I use jquery to select the first and last item divs in the following snippet and apply a different additional class to each:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

These will be somewhere on a web page. Thank you.

Answer 1

Doesn't get much easier than:

$('.item:first').addClass('first');
$('.item:last').addClass('last');

You can also do it in a single command, if you want to save a few cycles:

$('.item')
    .eq(0).addClass('first').end()
    .eq(-1).addClass('last').end();

Answer 2

$('.item').filter(':first').addClass('first-class').end().filter(':last').addClass('last-class')

Try taking a look at jQuery's Selector API for other selectors.