Sort divs using data attributes and jQuery

Question

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>

You haven’t included jQuery in your JSFiddle. You haven’t set the JSFiddle to include the JS in the <body> 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. — Sebastian Simon
– Sebastian Simon, Commented Jul 20, 2016 at 0:36
I edited your post to have a runnable snippet, but I'll focus on your problem in my answer below. — CassOnMars
– CassOnMars, Commented Jul 20, 2016 at 0:37

CassOnMars · Accepted Answer · 2016-07-20 00:37:48Z

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>

Collectives™ on Stack Overflow

Sort divs using data attributes and jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related