Array nach HTML-Datenattribut sortieren?

Question

Ich versuche lokalen Speicher zu lernen. Ich habe fünf Links mit jeweils einem Datum-Datum-Attribut und ich möchte, dass sie mit diesem Attribut sortiert werden. Ich habe viele Möglichkeiten ausprobiert, aber nichts scheint zu funktionieren. Von dem, was ich verstehe, sollte ich vor dem Sortieren analysieren, aber es hat nicht für mich funktioniert. Ich muss es falsch gemacht haben, weil ich nicht weiß, wie ich es sonst tun soll.

Hier ist mein HTML:

<div id="div1"> 
    <input id='clearHistory' type='button' value='Remove All History' /> 
    <input id='showHistory' type='button' value='Show History' /> 
    <ul id='history'> 
     <li> 
     <a class='date' href="#aa" data-date="November 12, 2001 03:24:00">Link 1</a> 
     </li> 
     <li> 
     <a class='date' href="#bb" data-date="August 4, 1993 03:24:00">Link 2</a> 
     </li> 
     <li> 
     <a class='date' href="#cc" data-date="October 17, 1995 03:24:00">Link 3</a> 
     </li> 
     <li> 
     <a class='date' href="#dd" data-date="December 1, 2010 03:24:00">Link 4</a> 
     </li> 
     <li> 
     <a class='date' href="#ee" data-date="August 17, 2004 03:24:00">Link 5</a> 
     </li> 
    </ul> 
    </div> 

    <p>Click on 'Show History' to see the 'user history'.</p> 
    <ul id='storedHistory'></ul> 

Und mein JavaScript:

$(document).ready(function() { 
    var storedHistory = document.getElementById('storedHistory'); 

    Storage.prototype.setObject = function(key, value) { 
    this.setItem(key, JSON.stringify(value)); 
    }; 

    Storage.prototype.getObject = function(key) { 
    var value = this.getItem(key); 
    return value && JSON.parse(value); 
    }; 

    //function sortDatesAscending(a, b) { return a.valueOf() - b.valueOf(); } function sortDatesDescending(a, b) { return b.valueOf() - a.valueOf(); } 

    function sortLinkDatesAscending(obj1, obj2) { 
    return obj1.date.valueOf() - obj2.date.valueOf(); 
    } 

    function sortLinkDatesDescending(obj1, obj2) { 
    return obj2.date.valueOf() - obj1.date.valueOf(); 
    } 

    var history = { 
    items: [] 
    }; 

    // Get each anchor and retrieve its date and link. Add to an object and add that object to the history's array Sort by ascending. Add to local storage. 
    $('ul > li > a').click(function(e) { 
    var date = $(this).attr('data-date'); 
    var listData = { 
     link: $(this).attr("href"), 
     date: date 
    }; 
    history.items.push(listData); 
    window.localStorage.setObject("history", history); 
    }); 

    /* Remove items from local storage */ 
    $('#clearHistory').click(function() { 
    window.localStorage.clear(); 
    }); 

    /* Retrieve items from local storage and add to stored history unordered list */ 
    $('#showHistory').click(function() { 
    console.log(window.localStorage); 
    var listHistory = localStorage.getObject('history'); 
    var counter = 1; 
    for (var i = 0; i < listHistory.items.length; i++) { 
     $("#storedHistory").append('<li>' + counter + '. Link: ' + listHistory.items[i].link + '<br>' + 'Date: ' + listHistory.items[i].date + '</li>'); 
     counter++; 
    } 
    }); 
}); 

Und hier ist der jsfiddle: https://jsfiddle.net/fLLsfd5j/2/

Answer 1

Try this für die Sortierung! (http://trentrichardson.com/2013/12/16/sort-dom-elements-jquery/)

var $history = $('#history li'), 
     $historyA = $history.children(); 
     $historyA.sort(function (a, b) { 
      var an = Date.parse(a.getAttribute('data-date')).valueOf(), 
      bn = Date.parse(b.getAttribute('data-date')).valueOf(); 
      if (an > bn) { 
       return 1; 
      } 
      if (an < bn) { 
       return -1; 
      } 
      return 0; 
     }); 
     $('#history').empty(); 
     $.each($historyA, function() { 
      $('#history').append($('<li>').html(this)); 
     }); 

Answer 2

Ich denke, das Ihre Arbeit tun sollten

function getHistory(){ 
    var as = document.querySelectorAll(".date"); // get elements with date class 
    Array.prototype.map.call(as, e => e.cloneNode(true)) //clone them into an array and sort 
       .sort((p,c) => Date.parse(p.dataset.date)<=Date.parse(c.dataset.date) ? -1 : 1) 
       .forEach((e,i) => as[i].parentNode.replaceChild(e, as[i])); 
} 
showHistory.onclick = getHistory; //add "click" eL to the DOM element with showHistory id 

http://jsbin.com/yoraqusora/2/edit?js,console,output