1

所以我注意到，在使用 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>
4

1 回答 1

0

您被 Chrome 的排序不稳定所打击，这意味着第二次排序不一定会保持第一次排序中创建的顺序。我也找不到任何 list.js 声明它实现稳定排序的地方。 在 Chrome 中对对象数组进行排序

于 2014-03-26T10:29:35.023 回答