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 对象转换为实际的 Array。

  • 立即调用.sort()并将返回值分配给变量，因为它返回相同的数组，尽管已修改。

  • 那时，简单地做了.append()每个项目。追加时，元素会从原来的位置移除，并放在新的位置，所以不需要缓存和清除元素。

这.map().toArray().sort()只是方法链接。.map()如上所述返回新的 jQuery 对象。.toArray()在该对象上调用，并返回一个数组。.sort()在该数组上调用，并返回分配给变量的相同数组。

这部分sort_order == "asc" ? sortA : sortD是一个条件运算符，类似于if...else. 基本上，如果条件为真，则返回sortA，否则返回sortD。

于 2012-06-21T21:22:43.790 回答