Question

I have something along the lines of :

html :

<div class="myclass">
    <img class="otherclass" src="image1.png" />
</div>

<div class="myclass">
    <img class="otherclass" src="image2.png" />
</div>

<div class="myclass">
    <img class="otherclass" src="image3.png" />
</div>

Javascript (jQuery):

alert($('.myclass img.otherclass').attr('src'));

I am able to get/alert an image src no problem (allthough I cant remember if its the first or last but that is besides the point) – What i want to to is spécicly get the first and last images (src),

I have tried :

alert($('.myclass:first img.otherclass').attr('src'));
alert($('.myclass:last img.otherclass').attr('src'));

But this does not seem to work for me. (I cannot change the HTML markup)

Am I using :first and :last correctly or should I be using something like .find() …

Answer 1

Seem to work fine for me: http://jsfiddle.net/RfHps/

However you could try the following:

var images = $('.myclass img.otherclass');

alert(images.first().attr('src'));
alert(images.last().attr('src'));

Also note that its actually faster to use .first()/.last() than selectors – see http://jsperf.com/first-performance/2