javascript - 按 HTML 数据属性对数组进行排序？

Question

我正在尝试学习本地存储。我有五个链接，每个链接都有一个数据日期属性，我希望使用该属性对它们进行排序。我尝试了很多方法但似乎没有任何效果。据我了解，我应该在排序之前进行解析，但这对我不起作用。我肯定做错了，因为我不知道还能怎么做。

这是我的 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>

还有我的 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++;
    }
  });
});

这是 jsfiddle:https://jsfiddle.net/fLLsfd5j/2/

Answer 1

试试这个排序! (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));
        });