Question

我有一个星期五下午的时刻，我真的很难按照我想要的方式对这些物品进行分类！

我有一个列表，将从两个下拉列表中选择进行过滤。一个是属性，另一个是值。然后，我想根据两个下拉列表对列表进行排序。

因此，例如，用户可能会选择值为30的attr4。然后，我希望先按匹配的项目按升序对列表进行排序，然后是不匹配的项目。即以下列表：

<ul>
    <li data-attr1="10" data-attr2="20" data-attr3="30" data-attr4="40" data-attr5="50">Option 1</li>
    <li data-attr1="20" data-attr2="30" data-attr3="40" data-attr4="50" data-attr5="10">Option 2</li>
    <li data-attr1="30" data-attr2="40" data-attr3="50" data-attr4="10" data-attr5="20">Option 3</li>
    <li data-attr1="40" data-attr2="50" data-attr3="10" data-attr4="20" data-attr5="30">Option 4</li>
    <li data-attr1="50" data-attr2="10" data-attr3="20" data-attr4="30" data-attr5="40">Option 5</li>
</ul>

然后会是这样的：

<ul>
    <li data-attr1="50" data-attr2="10" data-attr3="20" data-attr4="30" data-attr5="40">Option 5</li>
    <li data-attr1="10" data-attr2="20" data-attr3="30" data-attr4="40" data-attr5="50">Option 1</li>
    <li data-attr1="20" data-attr2="30" data-attr3="40" data-attr4="50" data-attr5="10">Option 2</li>
    <li data-attr1="40" data-attr2="50" data-attr3="10" data-attr4="20" data-attr5="30">Option 4</li>
    <li data-attr1="30" data-attr2="40" data-attr3="50" data-attr4="10" data-attr5="20">Option 3</li>
</ul>

我可以使用以下方式轻松排序整个列表：

$('ul li').tsort({ data: attribute, order: 'asc'});

但是我无法获得无与伦比的匹配项目。我尝试使用：

$('ul li').tsort({ data: test, order: 'asc', place: 'start' });

无济于事。谁能发现我做错了什么？任何帮助将不胜感激 - 祝周五愉快！谢谢！

的Darren

Answer 1

$('ul.suites li').each(function() {
    if($(this).data(attribute)==0) {
        resultsZilch.push($(this));
    } else if($(this).data(attribute)>=amount) {
        resultsMatch.push($(this));
    } else {
        resultsClose.push($(this));
    }
});

resultsMatch.sort(normalCompare);
resultsClose.sort(normalCompare).reverse();

var resultsTotal = resultsMatch.concat(resultsClose, resultsZilch);

$('ul li').remove();

$.each(resultsTotal, function(index, item) {
    $('ul').append(item);
});

Answer 2

有几种方法可以做到这一点。

最简单的方法是将列表拆分为两个列表，首先是与您的规范匹配的项目（因此首先是第一个），第二个是不匹配项目的项目。根据需要对每个列表进行排序，然后将它们连接起来覆盖原始列表。

第二种方法，它更复杂，但会对列表进行排序，需要您编写自定义排序函数：

$('ul li').tsort('', { sortFunction:function(a,b) {
    var amt, bmt;

    amt = matchesSpec(a);
    bmt = matchesSpec(b);
    if (amt || bmt) {
        if (amt && bmt) {
          // Both match spec, so equal
          return 0;
        }
        // Only one matches spec; the one that matches is always less to go first
        return (amt ? -1 : 1);
    }

    // Neither matches spec, do normal comparison
    return normalCompare(a, b);
}});

如果组合框属性与列表项匹配，

matchesSpec将返回true。如果项目在排序顺序中相等，则normalCompare将返回0;如果a应该首先出现，则返回-1，如果b应该先出现，则返回1。如果TinySort有一个可调用的默认函数，你也可以使用它。

jQuery TinySort按数据属性排序和放置

2 个答案: