使用 List js 对多个值进行排序

Question

试图让list.js 插件对多个值进行排序。 IE。它应该首先按类别排序，然后按字母顺序对类别中的标题进行排序。

这是一个演示：
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的class属性值。