javascript - List.js 在 Chrome 中无法正确排序

Question

所以我注意到，在使用 list.js 对一堆内容进行排序时，它在 Chrome 中的排序有点奇怪。

这是一个演示:
http://jsfiddle.net/xku3R/

如果您按顶部的类别，则不会发生任何事情，因为列表已按标题字母顺序排序，然后按类别排序。这在 Firefox 和 Safari 中按预期工作，但在 Chrome 中则不然。 Chrome 将以某种奇怪的方式按标题重新排序。

然后我注意到，如果我删除最后一个以设计为类别的条目，它将按预期工作:
http://jsfiddle.net/5s5tB/

什么可能导致此行为？

JS

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

$('span.sort').click(function() {
    var value = $(this).data('sort');
    if(value == 'category') {
        articleList.sort('title', { asc: true })
        articleList.sort(value, { asc: true })  
    } else {
        articleList.sort(value, { asc: true })
    }
});

HTML

<ul>
    <li class="category">
        <span class="sort" data-sort="category">Category</span>
    </li>
    <li class="overflow">
        <span class="sort" data-sort="title">Title</span>
    </li>
</ul>

<main id="articlelist">
    <ul class="list">
        <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">Architecture</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/previ/">PREVI</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">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/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">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/rebuilding-beirut/">Rebuilding Beirut</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">Cities</span> 
            <span class="overflow">
                <a class="title" href="http://someurl.com/unreal-estate-london/">Unreal Estate (London)</a>
            </span>
        </li>
    </ul>
</main>  

Answer 1

Chrome 的排序不稳定，这意味着第二次排序不一定会保持第一次排序中创建的顺序。另外，我找不到 list.js 声明它实现稳定排序的任何地方。 Sorting an array of objects in Chrome