找到最后一个重点元素

Question

我想确定哪个元素在一系列输入中具有最后焦点,这些输入是由用户动态添加的.此代码只能获取页面加载时可用的输入:

$('input.item').focus(function(){
    $(this).siblings('ul').slideDown();
});

这段代码可以看到所有曾经有过焦点的元素:

$('input.item').live('focus', function(){
    $(this).siblings('ul').slideDown();
});

HTML结构是这样的:

<ul>
    <li><input class="item" name="goals[]">
    <ul>
        <li>long list here</li>
        <li>long list here</li>
        <li>long list here</li>
    </ul></li>
</ul>
<a href="#" id="add">Add another</a>

在页面加载时,单个输入加载.然后每次添加另一个,创建并附加顶部无序列表的内容的新副本,并且新输入获得焦点.当每个人都获得焦点时,我想在其下方显示列表.但我似乎无法"关注现在或将来存在的最近关注的元素."

澄清一下:我不是在寻找DOM树中最后一个元素.我正在寻找当前具有焦点的元素,即使原始页面加载时不存在所述元素.

这张图片http://droplr.com/174l8H+

所以在上面的图像中,如果我要关注第二个元素,那么单词列表应该出现在第二个元素下面.我的焦点目前是最后一个元素,所以在那里显示单词.

我有某种基本假设错了吗？

Answer 1

document.activeElement就是你想要的。它是 HTML5 的一部分，并受到所有现代浏览器（包括 IE）的支持。

Answer 2

最后，其他地方的代码错误导致 DOM 混淆了谁拥有焦点。

该行是这样的：$('#item-add').find('input.item').focus();

它需要是这样的：$('#item-add:last').find('input.item').focus();

因为添加的项目始终位于列表的最后。

我学到了很多东西，我已经尝试开始并相应地投票。特别值得注意的是这个问题：

• .现场活动不累积。只有代码很粗糙。
• 在函数外部设置一个变量并在函数内更新它，以便您也可以在其他函数中访问它。
• jsfiddle.net和jsbin.com非常棒。
• 神圣的 HTML5，document.activeElement很高兴知道。

非常感谢您在这个问题上的所有帮助。