title: Sort Multiple Elements of the same type in jQuery
body: <p>Basically I have the following that is rendered by PHP:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child" data-sort=2&gt;2&lt;/div&gt;
      &lt;div class="child" data-sort=1&gt;1&lt;/div&gt;
      &lt;div class="child" data-sort=3&gt;3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="parent"&gt;
      &lt;div class="child" data-sort=1&gt;1&lt;/div&gt;
      &lt;div class="child" data-sort=3&gt;3&lt;/div&gt;
      &lt;div class="child" data-sort=2&gt;2&lt;/div&gt;
      &lt;div class="child" data-sort=2&gt;2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and what I want returned is:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child" data-sort=1&gt;1&lt;/div&gt;
      &lt;div class="child" data-sort=2&gt;2&lt;/div&gt;
      &lt;div class="child" data-sort=3&gt;3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="parent"&gt;
      &lt;div class="child" data-sort=1&gt;1&lt;/div&gt;
      &lt;div class="child" data-sort=2&gt;2&lt;/div&gt;
      &lt;div class="child" data-sort=2&gt;2&lt;/div&gt;
      &lt;div class="child" data-sort=3&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So basically it must sort multiple instances of the parent based on the data sort attribute of each child while still maintaing its state within the parent element.</p>
  
  <p>How would you use jQuery to target each parent element and then sort each child within that parent based on the data-sort attribute.</p>
  
  <p>This is the closest I have come, but it does not render anything:</p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function($) {
      jQuery.each('.parent', function(index, val) {
          jQuery(jQuery(this).children('.child')).sort(function(a,b){
              return a.dataset.sort &gt; b.dataset.sort;
          }).appendTo(this);
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>