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

Question

使用jQuery,从任意元素开始,在页面上查找下一个表单元素的最佳方法是什么？当我说表单元素我的意思是<input>,<select>,<button>或<textarea>.

在以下示例中,id为"this"的元素是任意起始点,id为"next"的元素是我想要查找的元素.所有例子都应该使用相同的答案.

例1:

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

例2:

<ul>
 <li><input id="this" type="text" /></li>
</ul>

<button id="next"></button>

例3:

<input id="this" type="text" />
<input id="next" type="text" />

例4:

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

编辑:到目前为止提供的两个答案都需要写一个序列号到页面上的所有输入元素.正如我在其中一个人的评论中提到的,这是我已经在做的事情,我更喜欢有一个只读解决方案,因为这将发生在一个插件中.

Answer 1

荣誉,

那么使用.index呢？

例如 $(':input:eq(' + ($(':input').index(this) + 1) + ')');

Answer 2

redsquare是绝对正确的,也是一个很好的解决方案,我也在我的一个项目中使用过.

我只是想指出他缺少一些括号,因为当前的解决方案将索引与1连接起来,而不是将它们加在一起.

所以纠正后的解决方案看起来像:

$(":input:eq(" + ($(":input").index(this) + 1) + ")");

对不起,这篇文章很不错,但我找不到评论他的帖子的方法......

Answer 3

这个解决方案不需要索引,也可以很好地与tabindex一起使用 - 换句话说,它为您提供浏览器每次都会在tab上提供的确切元素,而无需任何额外的工作.

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

它的工作原理是抓取表单中的所有可列表字段(如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的下一个元素.一旦有了,它会查看传入字段在该数组中的位置,并返回下一个元素.

有几点需要注意:

• jQuery似乎支持jQuery对象上的sort(),但我无法在文档中明确地找到它,因此调用toArray()然后在jQuery对象中重新包装数组.
• 还有其他字段可以选项卡,但我将它们排除在外,因为它们不是标准表单字段.

我用来测试它的代码是(使用jQuery 1.7):

<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'></textarea>
  <input id='submit' type='submit' name='e' tabindex='1' />
</form>

Answer 4

在尝试了我能找到的每个代码(并且浏览器之间存在问题)之后,我找到了一个适用于顶级浏览器的代码.由于一些奇怪的问题,无法使用以前的例程.

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

希望这有助于其他人.请享用.