CODEWITHSUNDEEP
jquery
user1082764
user1082764

Reputation: 2015

What is the best way to check if the 'Focused' input is the last one in the <li>

HTML :

<form>
<fieldset>
    <ul>    
        <li class="answerFields">
            <input type="text" value="" />
            <input type="text" value="" />
            <input type="text" value="" />
        </li>
    </ul>
</fieldset>
</form>

JQUERY :

$('.inputfield input').last().live('focus', function() {

    //this is just an example//
    document.write('a');
    ...
});

I have a fiddle.

I want to be able to check if the input that the user focuses is the last input in the <li>

constraints: I cannot change the HTML. The number of inputs will also be increasing or decreasing.

Upvotes: 0

Views: 398

Answers (6)

re-pieper
re-pieper

Reputation: 21

this works regardless of how many inputs per li or how many lis you have

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
var hoverIn = function()
{
    $(this).css('background-color', 'red');
}
var hoverOut = function()
{
    $(this).css('background-color', 'white');
}

var init = function()
{
    var liEls = $('.answerFields');
    for( i=0; i < liEls.length; i++)
    {
        $(liEls[i]).children('input:text').last().hover(hoverIn, hoverOut);
    }
}
window.onload = init;
</script>

<form>
<fieldset>
    <ul>    
        <li class="answerFields">
            <input type="text" value=""/>
            <input type="text" value=""/>
            <input type="text" value=""/>
        </li>
        <li class="answerFields">
            <input type="text" value=""/>
            <input type="text" value=""/>
            <input type="text" value=""/>
            <input type="text" value=""/>
        </li>
        <li class="answerFields">
            <input type="text" value=""/>
            <input type="text" value=""/>
        </li>
        <li class="answerFields">
            <input type="text" value=""/>
            <input type="text" value=""/>
            <input type="text" value=""/>
        </li>
    </ul>
</fieldset>
</form>

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816452

There are two problems in your code:

  1. $('.inputfield input').last().live(...) won't work. .live() has to immediately follow the selector:

    Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.

  2. document.write('a') will replace the current document. But I guess you only have it for testing. Still, you should be using console.log or append to the body.

To answer the question:

You can just check whether there are any following input elements or not:

if($(this).nextAll('input').length === 0) {
    // this is the last input element
}

Alternatively, you could use the following selector if you only want to bind to the last input element:

$('.inputfield input:last').live(...);

Make sure you know about the many disadvantages of .live() [docs]. Consider to use .delegate() [docs] or .on() [docs] instead.

You might also want to consider listening to the focus event instead of click. The focus can be changed with the tab key as well.

Upvotes: 3

labroo
labroo

Reputation: 2961

You can do this

$('li.answerFields').on('click','input:last', function() {    
     //document.write('a');
     alert('a');
 });​

I see in your fiddle you are using an older version of jQuery, in that case you can use delegate like this

$('li.answerFields').delegate('input:last','click', function() {    
     //document.write('a');
     alert('a');
 });​

Upvotes: 0

jbabey
jbabey

Reputation: 46647

You can use jQuery next() to see if there is a sibling (the last input will not have one)

http://jsfiddle.net/7vEy2/

edit: code

$('li > input').live('focus', function() {
    var that = $(this);

    if (that.next().length === 0) {
        alert('last one gained focus!');        
    } else {
        alert('nope');
    }
});

Upvotes: 1

Andy
Andy

Reputation: 30135

is this what you're looking for:

$('.answerFields input:last-of-type').live('click', function() {

?

Upvotes: 3

mrtsherman
mrtsherman

Reputation: 39872

Use delegate to monitor the parent. Then check if it is last input. Finally do something if so.

http://jsfiddle.net/n62GN/4/

$('.answerFields').delegate('input[type=text]', 'click', function() {
    if ($(this).is(':last-child')) {
       $(this).val('last');        
    }
});​

Live is deprecated so you should get used to delegate instead.

Upvotes: 0

Related Questions