title: Sort list based on data attribute (using jquery metadata plugin)
body: <p>I'm having a tough time figuring out how to go about sorting a list based on one of the key/value pairs in the data attribute.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li data="{name:'Foo', number: '1'}"&gt;
          &lt;h3&gt;Foo&lt;/h3&gt;
      &lt;/li&gt;
  
      &lt;li data="{name:'Bar', number: '2'}"&gt;
          &lt;h3&gt;Bar&lt;/h3&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the jQuery. I'm setting the metadata attr and accessing it. All of this works fine.</p>
  
  <pre><code>jQuery.metadata.setType("attr", "data");
  
  $(document).ready(function(){   
  
      // loop through each list item and get the metadata
      $('ul li').each(function () {  
          console.log($(this).metadata());
          // shows the following - Object {name="Foo", number="1"}
      });
  
  )};
  </code></pre>
  
  <p>Example: I would need to sort by Name ascending. Can someone point me in the right direction?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here's the form I'm using to trigger the sorting:</p>
  
  <pre><code>&lt;form name="filterForm"&gt;
      Sort: 
      &lt;select name="sort" size="1"&gt;
          &lt;option value="nameAsc" &lt;cfif URL.sort EQ 1&gt;selected="selected"&lt;/cfif&gt;&gt;Name A to Z&lt;/option&gt;
          &lt;option value="nameDesc" &lt;cfif URL.sort EQ 2&gt;selected="selected"&lt;/cfif&gt;&gt;Name Z to A&lt;/option&gt;
          &lt;option value="numberAsc" &lt;cfif URL.sort EQ 3&gt;selected="selected"&lt;/cfif&gt;&gt;Number 1-10&lt;/option&gt;
          &lt;option value="numberDesc" &lt;cfif URL.sort EQ 4&gt;selected="selected"&lt;/cfif&gt;&gt;Number 10-1&lt;/option&gt;
      &lt;/select&gt; 
  &lt;/form&gt; 
  </code></pre>
  
  <p>And the jquery to handle the change event, but I'm not sure I implemented Mikael Eliasson's code correctly because I'm not sure where to pass the value of what was selected:</p>
  
  <pre><code>$('form[name=filterForm] select').change(function(){
  
      var sortBy = this.value;
  
      var arr = []
  
      // loop through each list item and get the metadata
          $('ul li').each(function () {  
              var meta = $(this).metadata();
              meta.elem = $(this);
              arr.push(meta);
          });
  
      arr.sort(appendItems());
  
      function appendItems(){
  
          //Foreach item append it to the container. The first i arr will then end up in the top
          $.each(arr, function(index, item){
              item.elem.appendTo(item.elem.parent());
          }       
  
      }
  
  
  });
  </code></pre>