IE8无法使用.append（）jquery对象
我编写了这个函数来使列可以排序。 我想重新排列与特定订单号相关联的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]); } } });
我不知道这是不是问题，但是你的循环超出界限。
这个…
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() ，并返回一个Array。 在该Array上调用.sort() ，并返回分配给该变量的相同Array。
这部分sort_order == "asc" ? sortA : sortD sort_order == "asc" ? sortA : sortD是一个条件运算符，它类似于if...else的简写。 基本上，如果条件为true，则返回sortA ，否则返回sortD 。