Javascript 获取一个div中的所有元素，并使用tab键在该div中导航这些元素

我需要使用tab键来更改div中元素的焦点。焦点不应该从div中的元素移开。如何做到这一点。我正在尝试这种方法：

1） 将div中的所有元素都放到一个数组中

2） 将按键事件绑定到数组中的每个元素，并将nxt元素传递给它

3） 通过将焦点转移到下一个元素的功能处理按键

示例代码：

var elements = jQuery('xxx');
elements.each(function (index, element) { 
  element.bind("keypress", { nxt:elements[index+1] }, function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
      e.data.nxt[0].focus();
    }
  });
});

我的怀疑是

1） 如何从div中获取所有可以集中在tab键上的元素

2） jQuery中是否有任何东西可以一次性获得不同类型的元素（类似于，在一条语句中获取输入+选择+a+文本区域）

---

3） 如果这种方法不值得，请推荐一种。

您不需要jquery。您可以使用

tabIndex

属性进行切换

asdasd
asdasd 2
asdasd 3

---

演示：

看看这把小提琴。这可能对你有帮助 HTML代码

<div id="container">
    <input type="text" id="first"/>
    <input type="text" id="second"/>
    <input type="text" id="third"/>
</div>

---

如果我读对了，你需要用Tab键在div之间切换。 根据规范，Div上不支持Tabindex。它仅在、区域、按钮、输入、对象、选择和文本区域上受支持

至于这个问题，这是一个非常不寻常的要求，但也是一个非常有趣的要求。我从未尝试过这一点，但我可以针对您的每一个问题给出合理的建议：

可以使用.children（）获取该div中的所有子元素

您可以通过用逗号分隔所有选择器来一次性使用它们，也可以为它们提供类

---

让我知道它是否有效。

我也有类似的问题，并创建了一个小小的jQueryUI插件来限制TAB影响的字段。您可以简单地使用它：

$(".someGroup").tabGuard();

这将使tab在

.someGroup

包装器中的字段上进行迭代。通过这种方式，您可以在一个页面上对各种表单进行分组，焦点中的表单将继续在TAB或Shift+TAB上迭代（如果有意义的话）。在这里找到它：

---

它使用

：tabbable

来获取TAB可以关注的所有元素，并可以随意检查源代码，查看它是如何完成的。我希望您会发现它很有用。

您好，我的div中的元素将是动态的。我需要通过js添加该属性。但问题是我应该从我的部门得到什么样的元素？嗨，谢谢你的2。我可以使用.children（），但它不能解决问题（我的div将有其他div，span元素）。我应该得到在按下制表符时可以突出显示的元素。Div可能包含input、select、a、Div、span和其他元素

var elems = $('div#container input');



 elems.each(function(index,element) {
    console.log(element);
    $(element).keydown(function(e) {
        var code = e.keyCode || e.which;
        console.log(code);
        if(code === 9) {
           $(this).next().focus();
           e.preventDefault();
        }
    })
})

$(".someGroup").tabGuard();