0

i'm new to Javascript and can't seem to find a solution so please forgive me if this has already been answered.

I have a list of divs (lets say these are products of different colored socks). I want users to be able to click buttons and sort these divs by price and popularity based on data attributes of each div without using arrays.

Here is my current 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>
Condor
  • 199
  • 2
  • 22
Taylor
  • 345
  • 1
  • 5
  • 16
  • You haven’t included jQuery in your JSFiddle. You haven’t set the JSFiddle to include the JS in the `` part. There is no `sort` method on jQuery. In `$(a).data("price")-$(b).data("price")` (and in the `popularity` equivalent), you’re subtracting _strings_, without converting them to numbers. Maybe this helps: [Sorting a list by data-attribute](http://stackoverflow.com/a/32199776/4642212). – Sebastian Simon Jul 20 '16 at 00:36
  • I edited your post to have a runnable snippet, but I'll focus on your problem in my answer below. – CassOnMars Jul 20 '16 at 00:37

1 Answers1

0

The problem is not with your code, but rather with your attributes. Your popularity values do not match the values inside the <div>s.

Below is a snippet with the values matching your text:

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>
CassOnMars
  • 6,153
  • 2
  • 32
  • 47