<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>

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 );