Question

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');
    ...
});

我有fiddle。

我希望能够检查用户关注的输入是否是<li>

中的最后一个输入

约束：我无法更改HTML。输入数量也将增加或减少。

Answer 1

您的代码中存在两个问题：

$('.inputfield input').last().live(...)无效。 .live()必须紧跟选择器：

不支持链接方法。例如，$("a").find(".offsite, .external").live( ... );无效，无法按预期工作。
document.write('a')将替换当前文档。但我猜你只有它用于测试。不过，您应该使用console.log或附加到身体。

回答这个问题：

您可以检查是否有以下input元素：

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

或者，如果您只想绑定到最后一个输入元素，则可以使用以下选择器：

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

确保you know about the many disadvantages of .live() ^[docs]。请考虑使用.delegate() ^[docs]或.on() ^[docs]代替。

您可能还想考虑收听focus事件而不是click。也可以使用Tab键更改焦点。

Answer 2

这就是你要找的东西：

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

Answer 3

您可以使用jQuery next（）查看是否有兄弟（最后一个输入没有）

http://jsfiddle.net/7vEy2/

编辑：代码

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

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

Answer 4

无论每次使用多少输入或有多少lis

，这都有效

<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>

Answer 5

使用delegate监控父级。然后检查它是否是最后一次输入。最后再做一些事情。

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

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

Live已弃用，因此您应该习惯委派代替。

Answer 6

你可以这样做

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

我在你的小提琴中看到你正在使用旧版本的jQuery，在这种情况下你可以像这样使用委托

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

检查“聚焦”输入是否是<li> </li>中的最后一个输入的最佳方法是什么

6 个答案: