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

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

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

https://jsfiddle.net/6nkn8bvj/