getSorted

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

by Jeromy French

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">3</div>
</div>

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

JavaScript

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

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

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