[Solved] Need to re-order an un-ordered list by time of day

by


Instead of sorting the list, I’d recommend that you generate the list starting from the current hour as shown below. I’ve also added a working example on JSBin.

// Sets the inner contents of an HTML element identified by `listId` to a list
// of the next 24 hours starting from the current hour
//
//  Example:
//
//    <ol id="hour-list"></ol>
//    <script>listHours('foo-list')</script>
//    <ol id="hour-list"><li>12am</li><li>...</li></ol>
function listHours(listId) {
  // Get the current hour from a new Date object
  var currentHour = (new Date()).getHours();
  // An array to store the list items we generate
  var hourList = [];
  // Iterate through 24 hours starting from the current hour and add the list
  // items to the hour list
  var i = 0;
  while(i < 24) {
    var h = (currentHour + i) % 24;
    hourList.push('<li>' + formatHour(h) + '</li>');
    i++;
  }
  // Combine the list items and add them to element targeted by `listId`
  document.getElementById(listId).innerHTML = hourList.join('');
}

// Formats an hour (0-23) to an AM/PM format.
//
// Examples:
//
//  formatHour(0)   // => '12am'
//  formatHour(1)   // => '1am'
//  formatHour(13)  // => '1pm'
//  formatHour(23)  // => '11pm'
function formatHour(hour) {
  var fmtHour;
  if (hour === 0) {
    fmtHour = 12;
  } else if (hour > 12) {
    fmtHour = hour - 12;
  } else {
    fmtHour = hour;
  }
  var ampm = hour < 12 ? 'am' : 'pm';
  return fmtHour + ampm;
}

3

solved Need to re-order an un-ordered list by time of day