编辑 div 中元素的 Tab 键顺序，而不向每个元素添加 tabindex

Question

假设我的网页有 3 个div，里面有一堆链接。这样：

<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 中的链接，按顺序按顺序浏览第二个div 中的链接(链接 1、链接 4、链接 2，然后链接 3(，并按顺序按顺序浏览第三个div 中的链接。

我已经探索过按照我想要的顺序将 tabindex 添加到第二个div 中的链接中，但由于第三个div 中所有链接的 tabindex 默认为 0，因此 Tab 键顺序为：第一个div 中的链接，第三个div 中的链接，然后是第二个div 中的链接。

我正在考虑的解决方案是将自定义的 tabindex 添加到第二个div 的链接中，然后将 tabindex 添加到第三个div 中的每个链接(基于偏移量(。这个解决方案似乎很糟糕。

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

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

通过这种方式，您可以很好地将它们全部订购，并可以轻松设置第 2 分区的顺序

https://jsfiddle.net/6nkn8bvj/