在不向每个元素添加 tabindex 的情况下编辑 div 中元素的 tab 顺序

Question

假设我的网页有 3 个 div，其中有一堆 link。像这样：

<div class="first">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>
<div class="second">
    <input id="link1" type="text"/>
    <input id="link2" type="text"/>
    <input id="link3" type="text"/>
    <input id="link4" type="text"/>
</div>
<div class="third">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>

我希望能够按顺序在第一个 div 中切换 links，在第二个 div 中切换 links order (link 1, link 4, link 2, 然后是 link 3)，然后在第三个 div 中切换 link为了。

我探索了将 tabindex 添加到第二个 div 中的 link，按照我想要的顺序，但是由于所有 link 的 tabindex第三个 div 中的 s 默认为 0，Tab 键顺序为：第一个 div 中的 link，第三个 div 中的 link ，然后是第二个 div.

中的 link

我想到的解决办法是在第二个div的link中添加自定义的tabindex，然后在第三个[中的每个link添加一个tabindex =22=]（基于偏移量）。这个解决方案似乎很糟糕。

我很想知道是否有一种简洁的方法可以做到这一点。谢谢！

Answer 1

我会在一个循环中将 tabindex 添加到所有输入，并为第二个 div 添加条件。大概是这样的：

inputs.each(function(i) { 
  if (!$(this).parent().hasClass("second")) {
     $(this).attr('tabindex', i + 1); 
     numstart = i + 1;    
  } else {
    $(this).attr('tabindex', numstart + order[orderindex]); 
    ++orderindex;
  } 
});

通过这种方式，您可以将它们全部有序排列，并且可以轻松地为第二个 div

设置顺序

https://jsfiddle.net/6nkn8bvj/

在不向每个元素添加 tabindex 的情况下编辑 div 中元素的 tab 顺序

Editing the tab order of elements in a div without adding tabindex to every element

html

javascript

css

jquery

tabindex