JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<h1>
SORT HTML ELEMENTS
</h1>
<div id="list">
    <div class="listing-item" y="2" data-listing-price="">2</div>
    <div class="listing-item" y="3" data-listing-price="">3</div>
    <div class="listing-item" y="1" data-listing-price="">1</div>
    <div class="listing-item" y="4" data-listing-price="">4</div>
</div>

JavaScript

// SORTS BY ATTRIBUTE "y" b=>a (greater to smaller)
var divList = $(".listing-item");
divList.sort(function(a, b) {
  return $(b).attr("y") - $(a).attr("y")
});
$("#list").html(divList);

/*
// SORTS BY data "listing-price" a=>b (smaller to greater)
var divList = $(".listing-item");
divList.sort(function(a, b){ return $(a).data("listing-price")-$(b).data("listing-price")});

$("#list").html(divList);
*/