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

Question

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

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

鉴于此，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。模板可以在运行时多次添加到表单中，这会对手动指定的选项卡索引造成严重破坏。

当另一个模板添加到表单中时，它将被分配 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) 之类的内容在文档中按所需顺序移动元素。