Question

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

如果按顶部的“类别”，则不会发生任何事情，因为列表已按字母顺序排序在标题上，然后按类别排序。这适用于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

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

1 个答案: