Diziyi HTML veri özniteliğine göre sıralama?

Question

Yerel depolamayı öğrenmeye çalışıyorum. Her biri bir veri-tarih özelliğine sahip beş bağlantıya sahibim ve bu özniteliği kullanarak sıralanmasını istiyorum. Çok sayıda yol denedim ama hiçbir şey işe yaramıyor gibi görünüyor. Anladığım kadarıyla, sıralamadan önce ayrıştırmalıyım ama benim için çalışmadı. Yanlış yapmış olmalıyım çünkü bunu nasıl yapacağımı anlamıyorum.

<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> 

Ve JavaScript:

İşte benim HTML

$(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++; 
    } 
    }); 
}); 

Ve burada jsfiddle geçerli: https://jsfiddle.net/fLLsfd5j/2/

Answer 1

sıralamak için bu deneyin! (http://trentrichardson.com/2013/12/16/sort-dom-elements-jquery/) Ben bu işi yapmak sanırım

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

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