jQuery UI使用：tabbable来查找下一个和上一个可配置元素

Question

我想使用jQuery UI :tabbable选择器来选择页面上的下一个和上一个输入元素。我有以下的HTML

<div id="section1">1. 
    <input type="text" />2. 
    <input type="text" /> 
</div> 
<div id="section2">3. 
    <input type="text" />4. 
    <input type="text" />5. 
    <input type="text" /> 
</div> 

和下面的JavaScript

$(document).ready(function() { 
    $("input").on("keyup", function (event) { 
     if (event.keyCode == 40) $(this).next(":tabbable").focus(); 
     else if (event.keyCode == 38) $(this).prev(":tabbable").focus(); 
    }); 
}); 

的选择似乎是一个div内正常工作。例如，如果我在输入3，然后按下它会去输入4.但是，如果我按下选择器无法找到输入2.我似乎无法弄清楚如何找到页面上以前的tabbable元素。

Example jsfiddle

Answer 1

您可以使用输入要素的.index()，以此来他们之间切换。

$("input").on("keyup", function (event) { 
    if (event.keyCode == 40) { 
     $('input').eq(parseInt($('input').index($(this)), 10) + 1).focus(); 
    } else if (event.keyCode == 38) { 
     $('input').eq(parseInt($('input').index($(this)), 10) - 1).focus(); 
    } 
}); 

jsFiddle example

Answer 2

将这工作给你：

$(document).ready(function() { 
    $("input").on("keyup", function (event) { 
     if (event.keyCode == 40) { 
      $nextTabbable = $(this).next(":tabbable").length 
       ? $(this).next(":tabbable") 
       : $(this).parent().next().find(":tabbable").first() 
      ; 
      $nextTabbable.focus(); 
     } 
     else if (event.keyCode == 38) { 
      $prevTabbable = $(this).prev(":tabbable").length 
       ? $(this).prev(":tabbable") 
       : $(this).parent().prev().find(":tabbable").last() 
      ; 
      $prevTabbable.focus(); 
     } 
    }); 
}); 

这里是一个jsfiddle