使用数据属性和jQuery对div进行排序

Question

我是Javascript的新手，似乎找不到解决方案，所以如果这个问题已经得到了回答，请原谅。

我有一个div列表(假设这些是不同颜色的袜子的产品)。我希望用户能够单击按钮，并根据每个div的数据属性按价格和受欢迎程度对这些div进行排序，而无需使用数组。

这是我当前的JSFiddle：https://jsfiddle.net/4z97xffh/

​

var divList = $(".listing-item");

function sortPrice(){
divList.sort(function(a, b){ return $(a).data("price")-$(b).data("price")});    
$("#list").html(divList);}

function sortPopularity(){
divList.sort(function(a, b){ return $(a).data("popularity")-$(b).data("popularity")});    
$("#list").html(divList);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="sortPrice()">Sort by price Low -&gt; High</button>
<button onclick="sortPopularity()">Sort by Popularity Low -&gt; High</button>
    
<div id="list">
    <div class="listing-item" data-price="4" data-popularity="4">[Red Socks] Price: $4 | Popularity: 3</div>
    <div class="listing-item" data-price="2" data-popularity="2">[Blue Socks] Price: $2 | Popularity: 1</div>
    <div class="listing-item" data-price="1" data-popularity="1">[Green Socks] Price: $1 | Popularity: 2</div>
    <div class="listing-item" data-price="3" data-popularity="3">[Yellow Socks] Price: $3 | Popularity: 4</div>
</div>

​