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

我有一个在运行时使用模板动态构建的HTML表单 - 由用户操作决定。如何按节点深度排序，然后按tabindex排序？

我需要根据每个窗体部分中指定的tabindexing设置窗体上的tab索引。

鉴于此，是否有一种方法在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”与在1.

来源

2011-08-24 BenAlabaster

再次开始它的手动设定tabIndexes收集与templateIndex属性的div到一个数组，然后对它们进行排序，如：

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

：

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

使用非常相似的功能。然后遍历那些和排序阵列内的输入

然后使用类似node.parentNode.insertBefore（node，firstChild）以文件中所需顺序移动元素。

来源

2011-08-24 21:23:43 RobG

我想你已经有了它的症结，我会尝试。我不想移动文档中的字段，我只是想调整tabindexes，使它们按从1到* n *的顺序运行，其中* n *是字段数。我想你给我的东西会帮助我到达那里，谢谢。 – BenAlabaster

好的，那么你只需要迭代节点并添加基于循环计数器的属性。您可以为此使用集合，也可以使用递归遍历DOM以获得无限（或已定义但可变）的深度。无论适合什么。 – RobG

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

回答

相关问题