データ属性とjavascriptを使用してdivを並べ替える

Question

私はJavascriptを使い慣れていないため、解決策が見つからないようですので、これが既に回答済みの場合はご容赦ください。

私はdivのリストを持っています（これらは異なる色の靴下の製品です）。私はユーザーがボタンをクリックし、配列を使わずに各divのデータ属性に基づいて価格と人気度でこれらのdivをソートできるようにしたい。 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> 
 

Answer 1

問題は、あなたのコードではなく、むしろ自分の属性を持つ：

は、ここに私の現在のJSFiddleです。人気の値が<div>の値と一致しません。

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="3">[Red Socks] Price: $4 | Popularity: 3</div> 
 
    <div class="listing-item" data-price="2" data-popularity="1">[Blue Socks] Price: $2 | Popularity: 1</div> 
 
    <div class="listing-item" data-price="1" data-popularity="2">[Green Socks] Price: $1 | Popularity: 2</div> 
 
    <div class="listing-item" data-price="3" data-popularity="4">[Yellow Socks] Price: $3 | Popularity: 4</div> 
 
</div>