title: JavaScript order DOM elements based on name
body: <p>So I've got a list of hidden fields:</p>
  
  <pre><code>&lt;ul class="reorderable"&gt;
      &lt;li&gt;Foo&lt;input class="hiddenThing" type=hidden name="thing[0]" value=foo /&gt;&lt;/li&gt;
      &lt;li&gt;Bar&lt;input class="hiddenThing" type=hidden name="thing[1]" value=bar /&gt;&lt;/li&gt;
      &lt;li&gt;Baz&lt;input class="hiddenThing" type=hidden name="thing[2]" value=baz /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Purely informational, I don't expect this to be related to the answer, but FYI I'm using the JQuery UI "sortable" plugin:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('ul.reorderable').sortable({ update: stuffHappens; });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The thing you need to understand from this is that the sortable plugin allows the user to reorder these elements arbitrarily. Now, what I want to do is implement a revert button.</p>
  
  <pre><code>&lt;button value="Revert" onClick="revertList()" /&gt;
  </code></pre>
  
  <p>I want this to <strong>put the elements of the list back in order based on the name of the hidden inputs</strong>. I imagine this will require regexes (to extract the number from the brackets in the name. <code>thing[10]</code> should come after <code>thing[9]</code>) and I imagine that JQuery will be handy. But I'm drawing a blank when I try to approach this problem, probably because I'm not familiar with sorting DOM elements nor regexing with JavaScript.</p>
  
  <p>Keeping this naming format is a must.</p>