编辑 div 中元素的 tab 顺序而不为每个元素添加 tabindex答案

【问题标题】：Editing the tab order of elements in a div without adding tabindex to every element编辑 div 中元素的 tab 顺序而不为每个元素添加 tabindex
【发布时间】：2017-07-13 08:16:41
【问题描述】：

假设我的网页有 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 中的每个链接（基于偏移量）。这个解决方案似乎很糟糕。

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

【问题讨论】：

标签： javascript jquery html css tabindex

【解决方案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/

【讨论】：