title: Sort divs bases on element's data attribute
body: <p>I need to be able to sort a list of divs based on the data-price attribute of a sub element.
  This is my markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="terminal" data-price="195"&gt;
        &lt;h3&gt;195&lt;/h3&gt;
    &lt;/div&gt;
    195 - I should come in 2nd.
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="terminal" data-price="220"&gt;
        &lt;h3&gt;220&lt;/h3&gt;
    &lt;/div&gt;
    220 - I should come in 3rd.
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="terminal" data-price="130"&gt;
        &lt;h3&gt;130&lt;/h3&gt;
    &lt;/div&gt;
    130 - I should come in 1st.
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the script I have so far:</p>
  
  <pre><code>function sorter(a, b) {
      return a.getAttribute('data-price') - b.getAttribute('data-price');
  };
  $(document).ready(function () {
          var sortedDivs = $(".terminal").toArray().sort(sorter);
          $.each(sortedDivs, function (index, value) {
              $(".container", this).html(value);
              //console.log(value);
          }); 
  });
  </code></pre>
  
  <p>The result should replace the existing markup. I just can't get to work. What needs to be changed?</p>
  
  <p><a href="http://jsfiddle.net/a2TzL/" rel="nofollow">Here's a fiddle</a>.</p>