在jQuery中查找"next"表单输入元素的最佳方法是什么？

使用jQuery,从任意元素开始,在页面上查找下一个表单元素的最佳方法是什么？当我说表单元素我的意思是,,或</code>.</p> <p>在以下示例中,id为"this"的元素是任意起始点,id为"next"的元素是我想要查找的元素.所有例子都应该使用相同的答案.</p> <p>例1:</p> <pre class="brush:bash;"><ul> <li><input type="text" /></li> <li><input id="this" type="text" /></li> </ul> <ul> <li><input id="next" type="text" /></li> </ul> <button></button> </pre> <p>例2:</p> <pre class="brush:bash;"><ul> <li><input id="this" type="text" /></li> </ul> <button id="next"></button> </pre> <p>例3:</p> <pre class="brush:bash;"><input id="this" type="text" /> <input id="next" type="text" /> </pre> <p>例4:</p> <pre class="brush:bash;"><div> <input id="this" type="text" /> <input type="hidden" /> <div> <table> <tr><td></td><td><input id="next" type="text" /></td></tr> </table> </div> <button></button> </div> </pre> <p>编辑:到目前为止提供的两个答案都需要写一个序列号到页面上的所有输入元素.正如我在其中一个人的评论中提到的,这是我已经在做的事情,我更喜欢有一个只读解决方案,因为这将发生在一个插件中.</p><br><br><b>1> redsquare..：</b><hr><p>荣誉,</p> <p>那么使用.index呢？</p> <p>例如 <code>$(':input:eq(' + ($(':input').index(this) + 1) + ')');</code></p></p> <hr>过滤掉禁用字段$(":input:not(:disabled):eq("+($(":input:not(:disabled)").index(currentElement)+ 1) <hr>我需要添加另一组parens,否则它在索引上执行了字符串连接.结束于:$(":input:eq("+($(":input").index(this)+ 1)+")"); <hr>这很好用,但是不应该避免使用相同的DOM遍历吗？我存储了输入列表,如var $ inputs = $("input,select,etc"); 然后重用该数组:var $ nextInput = $ inputs.eq($ inputs.index($ myElement)+ 1); <br><br><b>2> reSPAWNed..：</b><hr><p>redsquare是绝对正确的,也是一个很好的解决方案,我也在我的一个项目中使用过.</p> <p>我只是想指出他缺少一些括号,因为当前的解决方案将索引与1连接起来,而不是将它们加在一起.</p> <p>所以纠正后的解决方案看起来像:</p> <pre class="brush:bash;">$(":input:eq(" + ($(":input").index(this) + 1) + ")"); </pre> <p>对不起,这篇文章很不错,但我找不到评论他的帖子的方法......</p></p> <br><br><b>3> Jai..：</b><hr><p>这个解决方案不需要索引,也可以很好地与tabindex一起使用 - 换句话说,它为您提供浏览器每次都会在tab上提供的确切元素,而无需任何额外的工作.</p> <pre class="brush:bash;">function nextOnTabIndex(element) { var fields = $($('form') .find('a[href], button, input, select, textarea') .filter(':visible').filter('a, :enabled') .toArray() .sort(function(a, b) { return ((a.tabIndex > 0) ? a.tabIndex : 1000) - ((b.tabIndex > 0) ? b.tabIndex : 1000); })); return fields.eq((fields.index(element) + 1) % fields.length); } </pre> <p>它的工作原理是抓取表单中的所有可列表字段(如http://www.w3.org/TR/html5/editing.html#focus-management所允许的),然后根据(http:// www)对字段进行排序.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute)计算出tab的下一个元素.一旦有了,它会查看传入字段在该数组中的位置,并返回下一个元素.</p> <p>有几点需要注意:</p> <p> <p>jQuery似乎支持jQuery对象上的sort(),但我无法在文档中明确地找到它,因此调用toArray()然后在jQuery对象中重新包装数组. </p> <p>还有其他字段可以选项卡,但我将它们排除在外,因为它们不是标准表单字段.</p> <p> <p>我用来测试它的代码是(使用jQuery 1.7):</p> <pre class="brush:bash;"><script> $(function() { $('a[href], button, input, select, textarea').click(function() { console.log(nextOnTabIndex($(this)).attr('name')); }) }); </script> <form> <input type='text' name='a'/> <input type='text' name='b' tabindex='1' /> <a>Hello</a> <input type='text' name='c'/> <textarea name='d' tabindex='2'>

$(document.body).keydown(function(event) {
    if(event.keyCode == 13 ) {
        $(":input")[$(":input").index(document.activeElement) + 1].focus();
        return false;
    }
});