2

jqueryを使用して簡単なソート機能を作成しています。ソートをアルファからz、zからアルファに切り替えたいと思います。

最初の条件は機能しますが、頼ることができません (z to alpha)..

html:

<a href="#">Toggle Sort</a>

<ul>
    <li>Apple</li>
    <li>Bascket</li>
    <li>Umberla</li>
    <li>Zebra</li>
    <li>Good Student</li>
    <li>Liable</li>
 </ul>

私のjs：

$("a").on("click", function(){

   var elements = $("ul").find("li").get();

   var sorted = elements.sort(function(a, b){
       if($(a).text() > $(b).text()){
           return 1;
       }

       if($(a).text() < $(b).text()){
           return -1;
       }
    });

    $("ul").html(sorted);

});

ここで何が悪い..

これがjsfiddle です

前もって感謝します..

私は作業例を更新しています:これは jsfiddle の作業例です

4

4 に答える 4

2

実際のsorting-directionを取得するには、トグル状態をスワップする必要があります。これは、次のように簡単に実行できます。

var elements = $("ul").find("li");
var state = false;

$("a").on("click", function () {
    state = !state;

    var sorted = elements.sort(function (a, b) {
        var _a = $(a).text();
        var _b = $(b).text();

        if (_a > _b) return state ? 1 : -1;
        if (_a < _b) return state ? -1 : 1;
    });

    $("ul").html(sorted);
});

http://jsfiddle.net/ARTsinn/sbWV3/3

アップデート

sorting-function を少し「単純」にするために、次の行を置き換えることができます。

var _a = $(a).text();
var _b = $(b).text();

if (_a > _b) return state ? 1 : -1;
if (_a < _b) return state ? -1 : 1;

この単純な 1 行の 3 項ステートメント演算子を使用すると、次のようになります。

return !state || ($(a).text() > $(b).text()) ? 1 : -1;

http://jsfiddle.net/ARTsinn/sbWV3

于 2013-06-07T06:04:43.070 に答える
0

動作中のjsFiddleデモ

現在の並べ替え順序を見つけるには、アルゴリズムが必要です。

$("a").on("click", function () {
    var type = 'asc';
    if ($(this).data('desc') === true) {
        type = 'desc';
        $(this).data('desc', false);
    }
    else {
        $(this).data('desc', true);
    }

    var elements = $("ul").find("li").get();
    var sorted = elements.sort(function(a, b){
             if($(a).text() > $(b).text()){ return  1; }
        else if($(a).text() < $(b).text()){ return -1; }
        return 0;
    });

    if (type == 'desc') {
        sorted.reverse();
    }

    $("ul").html(sorted);
});
于 2013-06-07T05:47:01.020 に答える
0

方向フラグを設定する必要があり ます（また0、等しいときに戻る必要があります）

http://jsfiddle.net/CX5Hu/14/

var dir=-1;

$("a").on("click", function(){

dir=dir*-1;

   var elements = $("ul").find("li").get();

   var sorted = elements.sort(function(a, b){

       if($.trim($(a).text()) > $.trim($(b).text())){
           return 1*dir;
       }

       if($.trim($(a).text()) < $.trim($(b).text())){
           return -1* dir;
       }
       return 0;
    });

   $("ul").html(sorted);


})

-trim削除できます。スペースやそのようなものがないことを確認したかっただけです。

于 2013-06-07T05:56:02.147 に答える
0

class最初の並べ替えの後にa を設定してから、次のreverse()メソッドを使用できます。

$("a").on("click", function () {
    var parentList = $("ul");
    var elements = parentList.children("li").get();
    var sorted = !parentList.is(".sorted") ? function () {
            elements.sort(function (a, b) {
                var a1 = $(a).text().substring(0, 1);
                var b1 = $(b).text().substring(0, 1);
                parentList.addClass("sorted");
                if (a1 > b1) {return 1;}
                if (a1 < b1) {return -1;}
                return 0;
            });
            return elements;
        } : elements.reverse();
    parentList.append(sorted);
});

働くフィドル

于 2013-06-07T06:03:30.493 に答える