Сортировка по нескольким значениям со списком js

Question

Попытка получить list.js плагин для сортировки по нескольким значениям. То есть он должен сначала отсортировать по категории, а затем отсортировать по названию в категории, в алфавитном порядке.

Вот демо:
http://jsfiddle.net/8E7cH/

Работает в Safari и Firefox. Но в Chrome это не так.

HTML

<ul> 
    <li class="category"> 
     <span class="sort">Category</span> 
    </li> 
</ul> 


<main id="articlelist"> 
    <ul class="list"><li> 
      <span class="category">Design</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/adventure-gear/">Adventure gear</a> 
      </span> 
     </li><li> 
      <span class="category">Architecture</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/djennes-mud-mosque/">Djenné’s Mud Mosque</a> 
      </span> 
     </li><li> 
      <span class="category">Cities</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/edge-city-sao-paulo/">Edge City (São Paulo)</a> 
      </span> 
     </li><li> 
      <span class="category">Cities</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/istanbul/">Istanbul</a> 
      </span> 
     </li><li> 
      <span class="category">Cities</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/jenin/">Jenin</a> 
      </span> 
     </li><li> 
      <span class="category">Architecture</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/previ/">PREVI</a> 
      </span> 
     </li><li> 
      <span class="category">Cities</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/rebuilding-beirut/">Rebuilding Beirut</a> 
      </span> 
     </li><li> 
      <span class="category">Architecture</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/revolutionary-housing-argentina/">Revolutionary housing in Argentina</a> 
      </span> 
     </li><li> 
      <span class="category">Cities</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/shenzhen/">Shenzhen</a> 
      </span> 
     </li><li> 
      <span class="category">Architecture</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/high-line/">The High Line</a> 
      </span> 
     </li><li> 
      <span class="category">Cities</span> 
      <span class="overflow"> 
       <a class="title" href="http://someurl.com/unreal-estate-london/">Unreal Estate (London)</a> 
      </span> 
     </li> 
    </ul> 
</main> 

JS

var articleList = new List('articlelist', {valueNames: [ 'category', 'title' ]}); 

$('span.sort').click(function() { 
     articleList.sort('title', { asc: true }) 
     articleList.sort('category', { asc: true }) 
}); 

Answer 1

Попробуйте с этим:

var articleList = new List('articlelist', {valueNames: [ 'category', 'overflow' ]}); 

$('span.sort').click(function() { 
     articleList.sort('overflow', { asc: true }) 
     articleList.sort('category', { asc: true }) 
}); 

Я думаю, что вы должны использовать значение атрибута класса тега span.