我编写这个函数是为了使列可排序。我想根据与特定订单号关联的 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()
。这只是迭代元素,并将您提供的任何内容作为返回值放入新的 jQuery 对象中,因此您最终会得到一个充满数字的 jQuery 对象。摆脱了
$.trim()
因为parseInt
忽略前导/尾随空格使用
.toArray()
将新的 jQuery 对象转换为实际的数组。立即调用
.sort()
并将返回值分配给变量,因为它返回相同的数组,尽管已修改。此时,只需执行每个项目的
.append()
即可。追加时,元素会从原来的位置移除,并放置到新的位置,因此不需要缓存和清除元素。
.map().toArray().sort()
只是方法链。 .map()
返回新的 jQuery 对象,如上所述。对该对象调用 .toArray()
并返回一个数组。在该数组上调用 .sort()
,并返回相同的数组,该数组被分配给变量。
这部分sort_order == "asc"? sortA : sortD
是一个条件运算符,类似于 if...else
的简写。基本上,如果条件为真,则返回 sortA
,否则返回 sortD
。
关于javascript - IE8 无法 .append() jquery 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11146889/