Question

我有一个HTML表单，它是在运行时使用模板动态构建的 - 由用户操作决定。

我需要根据表单中每个部分中指定的tabindexing在表单中设置选项卡索引。

鉴于此，jQuery中有没有办法在一个集合中订购项目？例如，遵循这种伪结构的东西会很棒，但我无法弄清楚如何实现它：

<div name="firstTemplate" templateIndex="0">
    <input type="text" name="field0" tabIndex="1" />
    <input type="text" name="field1" tabIndex="2" />
    <input type="text" name="field2" tabIndex="3" />
</div>
<div name="firstTemplateRpt" templateIndex="1">
    <input type="text" name="field0" tabIndex="1" />
    <input type="text" name="field1" tabIndex="2" />
    <input type="text" name="field2" tabIndex="3" />
</div>
<div name="secondTemplate" templateIndex="2">
    <input type="text" name="field0" tabIndex="1" />
    <input type="text" name="field1" tabIndex="2" />
    <input type="text" name="field2" tabIndex="3" />
</div>

然后我可以使用以下概念的一些变体：

$("input, textarea, select, input:checkbox, input:radio").orderBy("templateIndex, tabIndex");

其中templateIndex是表单中模板的索引，tabindex将是模板中控件的tabindex。模板可以在运行时多次添加到表单中，这会对手动指定的tabindexes造成严重破坏。

当另一个模板添加到表单时，将为其分配templateIndex =“3”，其手动设置tabIndexes再次从1开始。

Answer 1

将带有 templateIndex 属性的div收集到一个数组中，然后对它们进行排序：

divArray.sort(function(a, b) {
    return a.getAttribute('templateIndex') - b.getAttribute('templateIndex');
});

然后迭代这些并使用非常相似的函数对数组内的输入进行排序：

inpArray.sort(function(a, b) {
    return a.tabIndex - b.tabIndex;
});

然后使用 node.parentNode.insertBefore（node，firstChild）之类的东西在文档中按所需顺序移动元素。

如何按节点深度排序，然后按tabindex排序？

1 个答案: