getSorted

https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort

by samu_eyes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
Before sorting
</h1>
<div id="starting_divs">
  <div class="item" data-order="2">2</div>
  <div class="item" data-order="1">1</div>
  <div class="item" data-order="4">4</div>
  <div class="item" data-order="3">9</div>
</div>

<hr />
<h1>
After sorting
</h1>
<div id="after_sorting">
  This starts out blank.
</div>

JavaScript

bvar $sorted_items,
  getSorted = function(selector, attrName) {
      return $(
        $(selector).toArray().sort(function(a, b){
            var aVal = parseInt(a.getAttribute(attrName)),
                bVal = parseInt(b.getAttribute(attrName)); 
               var naVal = parseInt(a.text());
               var nbVal = parseInt(b.text());
                console.log(naVal - nbVal);
            return naVal - nbVal;
        })
      );
  };

$sorted_items = getSorted('#starting_divs .item', 'data-order').clone();

$('#after_sorting').html( $sorted_items );