javascript - IE8 无法 .append() jquery 对象

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()。这只是迭代元素，并将您提供的任何内容作为返回值放入新的 jQuery 对象中，因此您最终会得到一个充满数字的 jQuery 对象。

• 摆脱了 $.trim() 因为 parseInt 忽略前导/尾随空格

• 使用.toArray()将新的 jQuery 对象转换为实际的数组。

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

• 此时，只需执行每个项目的 .append() 即可。追加时，元素会从原来的位置移除，并放置到新的位置，因此不需要缓存和清除元素。

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

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