Sort divs using data attributes and JS

Question

I asked an almost identical question about 5 months ago and got a great answer that seemed to work at the time. Since then I have taken a break and have not looked at so much as a line of code. Now that I have some free time, I am realizing I am quite rusty with Javascript.

Link to previous question: https://stackoverflow.com/questions/38470543/sort-divs-using-data-attributes-and-javascript

This is my current JSFiddle. jsfiddle.net/wtckhkdq/3/

As you can see I have 4 divs with a variety of data attributes including price, date of listing, and alphabetical rank. I am trying to get the script working so that when each button is pressed, it sorts the divs according to the referenced function. My JSFiddle will not run properly and after looking it over multiple times I can't seem to find what's wrong. Thanks in advance and happy new years to all!

Dekel · Accepted Answer · 2016-12-27 22:02:14Z

1

You need to include the jquery library to use it.
In jsfiddle, due to the way they wrote there final output builder, there is a problem with js-scoping, so the functions you created weren't visible by the html block. You can fix this specifically by changing the function sortDateNewOld (){ to sortDateNewOld = function(){ inside jsfiddle.

Here is a fix (and everything work)

var divList = $(".listing");

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

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

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

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

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

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

.button {
  font-size: 15px; width: 120px; height: 30px; background-color: white; display: inline-block; cursor: pointer;}

.listing {
  width: 342px; height: 282px; border-radius: 7px; background-color: #f1f1f1; margin: auto; margin-top: 80px; position: relative; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.15);}

.listinginfo {
  width: 342px; height: 64px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: white; position: absolute; bottom: 0; left: 0; box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.05); font-size: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button class="button" onclick="sortDateNewOld()">Date New-Old</button>
    <button class="button" onclick="sortDateOldNew()">Date Old-New</button>
    <button class="button" onclick="sortAlphAZ()">Name A-Z</button>
    <button class="button" onclick="sortAlphZA()">Name Z-A</button>
    <button class="button" onclick="sortPriceHighLow()">Price High-Low</button>
    <button class="button" onclick="sortPriceLowHigh()">Price Low-High</button>
    
<div id="list">
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="99"
            data-date="20171201"
            data-alph="010101"
            style="background-image: url()">
            <div class="listinginfo">
            AAA<br>
            Price: $99<br> 
            Date: December 1, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="199"
            data-date="20171202"
            data-alph="010102"
            style="background-image: url()">
            <div class="listinginfo">
            AAB<br>
            Price: $199<br> 
            Date: December 2, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="299"
            data-date="20171203"
            data-alph="010103"
            style="background-image: url()">
            <div class="listinginfo">
            AAC<br>
            Price: $299<br> 
            Date: December 3, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
    <!------------------------------------------------------------->
    <div class="listing"
            data-price="399"
            data-date="20171204"
            data-alph="010104"
            style="background-image: url()">
            <div class="listinginfo">
            AAD<br>
            Price: $399<br> 
            Date: December 4, 2017
            </div>
    </div>
    <!------------------------------------------------------------->
    
</div>

edited Dec 27, 2016 at 22:02

answered Dec 27, 2016 at 21:56

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

trincot Over a year ago

Your second point could be misinterpreted as if jsfiddle itself has a problem.

Dekel Over a year ago

@trincot, you'r right, good point. I'll update this section to be more accurate :) Thanks!

Dekel Over a year ago

@trincot can you check and let me know if you think that it's better now?

trincot Over a year ago

In fact there is an option in jsfiddle that allows you to specify how/when the JavaScript should be loaded. Cick on the JavaScript icon on the top-left side of the script panel.

Dekel Over a year ago

nice :) didn't remember that! regarding my explanation - is it better now?

|

Collectives™ on Stack Overflow

Sort divs using data attributes and JS

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related