Modification de l'ordre de tabulation des éléments dans une div sans ajouter de tabindex à chaque élément

Question

Supposons que ma page Web comporte 3 divs, avec un certain nombre de liens. Comme si:

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

Je veux être en mesure de naviguer à travers les liens dans le premier div dans l'ordre, naviguer à travers les liens dans la deuxième div sur l'ordre (lien 1, lien 4, lien 2, Lien 3), et tabulation à travers les liens dans la troisième div dans l'ordre. J'ai exploré l'ajout tabindex aux liens dans la deuxième div, dans l'ordre que je veux qu'il soit, mais comme l'index tabindex de tous les liens dans le troisième div est 0 par défaut, l'ordre de tabulation va: les liens dans la première div, les liens dans la troisième div, puis les liens dans la deuxième div.

La solution à laquelle je pense est d'ajouter le tabindex personnalisé aux liens du second div, puis un tabindex à chaque lien dans le troisième div (basé sur le décalage). Cette solution semble mauvaise.

J'étais curieux de savoir s'il y avait une manière propre de faire ceci. Je vous remercie!

Answer 1

Je voudrais obtenir tabindex ajouté à toutes les entrées dans une boucle avec une condition supplémentaire pour la deuxième div. Probablement quelque chose comme ceci:

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

cette façon, vous pouvez obtenir tous bien commandés et ont un moyen facile de définir l'ordre pour le 2ème div

https://jsfiddle.net/6nkn8bvj/