How do I order by node depth and then by tabindex?
<p>I've got an HTML form that's built dynamically using templates at runtime - dictated by user action.</p>

<p>I need to set the tab index across the form based on the tabindexing specified within each of the pieces of the form.</p>

<p>Given this, is there a way in jQuery to order items within a set? For instance something that follows this pseudo structure would be awesome, but I can't figure out how to achieve it:</p>

<pre><code>&lt;div name="firstTemplate" templateIndex="0"&gt;
    &lt;input type="text" name="field0" tabIndex="1" /&gt;
    &lt;input type="text" name="field1" tabIndex="2" /&gt;
    &lt;input type="text" name="field2" tabIndex="3" /&gt;
&lt;/div&gt;
&lt;div name="firstTemplateRpt" templateIndex="1"&gt;
    &lt;input type="text" name="field0" tabIndex="1" /&gt;
    &lt;input type="text" name="field1" tabIndex="2" /&gt;
    &lt;input type="text" name="field2" tabIndex="3" /&gt;
&lt;/div&gt;
&lt;div name="secondTemplate" templateIndex="2"&gt;
    &lt;input type="text" name="field0" tabIndex="1" /&gt;
    &lt;input type="text" name="field1" tabIndex="2" /&gt;
    &lt;input type="text" name="field2" tabIndex="3" /&gt;
&lt;/div&gt;
</code></pre>

<p>I could then use some variation of the following concept:</p>

<pre><code>$("input, textarea, select, input:checkbox, input:radio").orderBy("templateIndex, tabIndex");
</code></pre>

<p>Where templateIndex would be the index of the template within the form and the tabindex would be the tabindex of the control within the template. A template could be added to the form multiple times at runtime, which is causing havoc on manually specified tabindexes.</p>

<p>When another template is added to the form, it would be assigned the templateIndex="3" with its manually set tabIndexes starting again at 1.</p>
