1

この関数は、列を並べ替え可能にするために作成しました。特定の注文番号に関連付けられているdivを再配置したいと思います。chromeとfirefoxで正常に動作しますが、何らかの理由でIE8では、関数の最後に、再配置されたすべてのコンテンツを#current_orders_content2divに追加する代わりに、すべてのコンテンツが単に消えます。関数はJSlintで（jsfiddleを介して）チェックアウトします。興味深いのは、最後に（IEコンソールを介して）すべての値を見ると、すべてが正常に見えることです。値は、私が期待する値です。append()失敗したようです。だから私はでテストしましたが.html()、appendToそれでも喜びはありません。html文字列を渡すと機能しますが、これらのjqueryオブジェクトで失敗します。

なぜ、またはどのようにそれを機能させることができるかについてのアイデアはありますか？

ありがとう！

$('.sortable').click(function () {
    "use strict";
    if ($(this).hasClass('sortable_numeric')) {

        /*
        *function sets ascending/descending classes
        *for formatting, placement of arrow_up.png, arrow_down.png
        *returns the sort order to be used below "asc" or "desc"
        */
        var sort_order = sort_class_distribution($(this));
        var current_val = "";
        var order_number = "";

        /*
        *determine what column is being sorted
        *remove the "_header" text from the id to
        *get this information
        */
        var sort_column = this.id;

        sort_column = sort_column.replace("header_", "");

        /*
        *append "_div" to the end of the string to get
        *the class of the divs we are sorting by
        */
        sort_column += "_div";

        var valuesArr = [];

        $('.' + sort_column).each(function () {

            var current_val = $.trim($(this).text());

            current_val = parseInt(current_val, 10);

            valuesArr.push(current_val);

        });


        var sorted = [];

        if (sort_order == "asc") {

            sorted = valuesArr.slice(0).sort(sortA);


        } else if (sort_order == "desc") {

            sorted = valuesArr.slice(0).sort(sortD);

        }

        /*
        * for each item in this array, get the parent div 
        * with the class order_and_lines_container_div. 
        * 
        * push it into an array of its own to to put back 
        * onto the page in the order of the sorted array
        */

        var containerArr = [];
        var current_container = "";
        var c = 0;

        for ( c = 0; c <= sorted.length; c++ ) {

            current_container = $('#order_container_' + sorted[c]);

            containerArr.push(current_container);

        }

        $('#currentOrdersContent2').html('');

        for ( c = 0; c <= sorted.length; c++ ) {

            $('#currentOrdersContent2').append(containerArr[c]);

        }

    }

});
4

1 に答える 1

0

これが問題かどうかはわかりませんが、ループが範囲外になっています。

これ...

for ( c = 0; c <= sorted.length; c++ ) {

これである必要があります...

 // -----------v---constrain to indices less than sorted.length
for ( c = 0; c < sorted.length; c++ ) {

また、この種のコードに必要なコードよりもはるかに多くのコードを使用しているようです。

これがあなたのコードを少し作り直したものです...

$('.sortable').click(function () {
    "use strict";
    if ($(this).hasClass('sortable_numeric')) {

        var sort_order = sort_class_distribution($(this)),
            sort_column = this.id.replace("header_", "") + "_div",
            content2 = $('#currentOrdersContent2');

        var sorted = $('.' + sort_column).map(function () {
                return parseInt($(this).text(), 10);
            })
            .toArray()
            .sort(sort_order == "asc" ? sortA : sortD);

        $.each(sorted, function(i, item) {
            content2.append($('#order_container_' + item));
        });
    }
});

変更点のいくつかは...

  • 不要な変数宣言の束を削除しました（シャドウまたは未使用）

  • 使用済み.map()。これは単に要素を反復し、return値として提供したものをすべて新しいjQueryオブジェクトに配置するため、最終的には数値でいっぱいのjQueryオブジェクトになります。

  • 先頭/末尾の空白を無視する$.trim()ため、削除しましたparseInt

  • .toArray()新しいjQueryオブジェクトを実際の配列に変換するために使用されます。

  • 変更されても同じ配列を返すため、すぐに呼び出さ.sort()れ、戻り値が変数に割り当てられます。

  • その時点で、単に.append()各アイテムのを行いました。追加すると、要素は元の場所から削除され、新しい場所に配置されるため、要素をキャッシュしてクリアする必要はありません。

これ.map().toArray().sort()は単なるメソッドチェーンです。.map()上記のように新しいjQueryオブジェクトを返します。.toArray()そのオブジェクトで呼び出され、配列を返します。.sort()その配列で呼び出され、変数に割り当てられている同じ配列を返します。

この部分sort_order == "asc" ? sortA : sortDは条件演算子であり、の省略形のようなものif...elseです。基本的に、条件が真の場合はを返しsortA、そうでない場合はを返しsortDます。

于 2012-06-21T21:22:43.790 に答える