Question

This is my code :

<a href="javascript:void(0);" id="apri-menu">
    <span>First</span>
    <span style="display:none;">Second</span>
</a>​

$('#apri-menu').click(function () {
    $(this).find('span').first().hide().end().find('span').last().show();
    $('#menu-nascosto').show();
});​

clicking on the link I’d aspect to show the second span, but seems that .end() make some pain.

Where am I wrong?

Answer 1

What .end() does is “return the jQuery object to its previous selection state”. In your example, the last operation that modifies the matched objects is .first(), so .end() rewinds time back to just before that — after .find('span'). So the end result is as if you had written

$(this).find('span').find('span').last().show();

…which will obviously not work because there are no nested <span>s in your markup.

Simply getting rid of the second .find() will fix things.