Question

我编写了这个函数来使列可以排序。我想重新排列与特定订单号相关联的div。它在chrome和firefox中运行良好，但出于某些原因，在IE8中，而不是在函数结束时，将所有重新排列的内容附加到#current_orders_content2 div，所有内容都会消失。该函数在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]);

        }

    }

});

Answer 1

我不知道这是不是问题，但是你的循环已超出界限。

此...

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()，并返回一个Array。在该Array上调用.sort()，并返回分配给变量的相同Array。

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

IE8无法使用.append（）jquery对象

1 个答案: