title: How to sort list items using custom sort order in jQuery
body: <p>My question is very similar to a number of others I've found on Stack Overflow, but not quite the same.</p>
  
  <p>I'd like to sort list items based on the content of a span contained within each item -- but using a sort order that I can define. Here's the HTML for a sample list item:</p>
  
  <pre><code>&lt;li&gt;
      &lt;span class="fname"&gt;John&lt;/span&gt;
      &lt;span class="lname"&gt;Doe&lt;/span&gt;
      &lt;span class="year"&gt;Sophomore&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I want to sort based on the content of the "year" span, but chronologically rather than alphabetically. The order, obviously, needs to be:</p>
  
  <ul>
  <li>Freshman</li>
  <li>Sophomore</li>
  <li>Junior</li>
  <li>Senior</li>
  </ul>
  
  <p>How can I do this?</p>
  
  <p>Just for reference, I'm using the following jQuery code (which works perfectly) to sort alphabetically by last name:</p>
  
  <pre><code>function sortByLastName(){
      var myList = $('#foo ul');
      var listItems = myList.children('li').get();
      listItems.sort(function(a,b){
          var compA = $(a).find('.lname').text().toUpperCase();
          var compB = $(b).find('.lname').text().toUpperCase();
          return (compA &lt; compB) ? -1 : (compA &gt; compB) ? 1 : 0;
      });
      $(myList).append(listItems);
  };
  </code></pre>