jquery find last element

Question

What I want is, when i use the tab key on the last list select menu I want to get an alert. With the jquery i've got I will get an alert but on every select menu instead of only the last.

HTML markup

<div id="invoiceLinesForm" style="">
<ul id="sortable" class="ui-sortable">
    <li id="headerLine">
        <div class="qty">Aantal</div>
        <div class="description">Omschrijving</div>
        <div class="price">Bedrag EUR</div>
        <div class="total">Totaal</div>
        <div class="vat">BTW</div>
        <div class="actions"></div>
        <div class="clear"></div>
    </li>

    <li id="firstLine">
        <div class="qty"><input type="text" name="invoice_line[0][qty]" value="1" class="qty_input"></div>
        <div class="description"><textarea name="invoice_line[0][description]"></textarea></div>
        <div class="price"><input type="text" name="invoice_line[0][price]" value="0.00" style="text-align:right;"></div>
        <div class="total">0,00</div>
        <div class="vat">
            <select name="invoice_line[0][vat]">
                <option value="0.21">21%</option>
                <option value="0.06">6%</option>
                <option value="0.00">0%</option>
            </select>
        </div>
        <input type="hidden" name="invoice_line[0][total]" class="line_total" value="0">
        <input type="hidden" name="invoice_line[0][vat_amount]" class="line_vat_amount" value="0">
        <input type="radio" class="line_selector" style="display:none;">

        <div class="actions"><span class="delLine">Verwijder </span><span>Slepen</span></div>
        <div class="clear"></div>
    </li>

    <li class="extraLine">
        <div class="qty"><input type="text" name="invoice_line[1][qty]" value="1" class="qty_input"></div>
        <div class="description"><textarea name="invoice_line[1][description]"></textarea></div>
        <div class="price"><input type="text" name="invoice_line[1][price]" value="0.00" style="text-align:right;"></div>
        <div class="total">0,00</div>
        <div class="vat">
            <select name="invoice_line[1][vat]">
                <option value="0.21">21%</option>
                <option value="0.06">6%</option>
                <option value="0.00">0%</option>
            </select>
        </div>
        <input type="hidden" name="invoice_line[1][total]" class="line_total" value="0">
        <input type="hidden" name="invoice_line[1][vat_amount]" class="line_vat_amount" value="0">
        <input type="radio" class="line_selector" style="display:none;">

        <div class="actions"><span class="delLine">Verwijder </span><span>Slepen</span></div>
        <div class="clear"></div>
    </li>
    <li class="extraLine">
        <div class="qty"><input type="text" name="invoice_line[2][qty]" value="1" class="qty_input"></div>
        <div class="description"><textarea name="invoice_line[2][description]"></textarea></div>
        <div class="price"><input type="text" name="invoice_line[2][price]" value="0.00" style="text-align:right;"></div>
        <div class="total">0,00</div>
        <div class="vat">
            <select name="invoice_line[2][vat]">
                <option value="0.21">21%</option>
                <option value="0.06">6%</option>
                <option value="0.00">0%</option>
            </select>
        </div>
        <input type="hidden" name="invoice_line[2][total]" class="line_total" value="0">
        <input type="hidden" name="invoice_line[2][vat_amount]" class="line_vat_amount" value="0">
        <input type="radio" class="line_selector" style="display:none;">

        <div class="actions"><span class="delLine">Verwijder </span><span>Slepen</span></div>
        <div class="clear"></div>
    </li>
</ul>

jquery

$('.vat select').live('keyup', function(e) 
{ 
    if (e.keyCode == 9) 
    {               
        $(this).blur(function(e)
        {
            if($(this).parent().parent().is('li:last'))
            {
                alert('last item');
            }

            e.preventDefault();
            e.stopImmediatePropagation();

        });                 
    } 

});

Answer 1

I take ahrens hint serious and give you some input. My solution would be:

// Use on, so there is only one event listener
$('#sortable').on('keyup', '.vat select', function(event) {
    // Cache your event target
    var $select = $(this);

    if (event.keyCode == 9) {   

        $select.blur(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();

            var $clostestLi = $select.closest('li');

            if($clostestLi.is(':last-child') == true) {
                alert('last item');
            }
        });                 
}
});

Fiddle: http://jsfiddle.net/qLGeb/

Answer 2

    if($(this).parents("li").is(':last-child'))
    {
        alert('last item');
    }

Demo: http://jsfiddle.net/UtHKR/3/

Answer 3

$('.vat select').live('keyup', function(e) 
{ 
    if (e.keyCode == 9) 
    {               
        $(this).blur(function(e)
        {
            if($(this).parent().parent().is($(':last'))
            {
                alert('last item');
            }

            e.preventDefault();
            e.stopImmediatePropagation();

        });                 
    } 

});