使用.hide()完全会使IE 8崩溃 [英] Using .hide() completely crashes IE 8
问题描述
我编写了一些简单的jQuery代码,以根据行列之一中的数据尝试隐藏html表的行.我编写的代码在除IE8之外的所有浏览器中均能正常工作,IE8完全崩溃(IE停止响应,尝试重新加载选项卡,然后报告页面无法加载).
如果我包括
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
页面不再崩溃,但最好是实际解决此问题而不是应用解决方法.
这里是HTML表的示例,以及我用来隐藏/显示行的jQuery代码.
<table>
<thead> ... headers, table has 8 columns </thead>
<tbody>
<!--- The fifth column has a date I need to use to hide/show the rows -->
<tr> ... <td>9/27/2011</td> ... </tr>
...
</tbody>
</table>
function filterData() {
$("input[type='checkbox']:checked").attr("checked", false);
//This gets me the date to filter on
var filterDate = new Date($("#SelectedTimePeriod").val());
var minDate = new Date($("#SelectedTimePeriod").val());
minDate.setDate(filterDate.getDate() - 7 * $("#SelectedTimeRange").val());
var maxDate = new Date($("#SelectedTimePeriod").val());
maxDate.setDate(filterDate.getDate() + 7 * $("#SelectedTimeRange").val());
$("tbody tr td:nth-child(5)").each(function () {
var rowDate = new Date($(this).text());
if (rowDate.getTime() < minDate.getTime() || rowDate.getTime() > maxDate.getTime())
$(this).parent().hide();
else
$(this).parent().show();
});
}
似乎使IE8崩溃的行是:
$(this).parent().hide();
任何帮助将不胜感激,如果还有更多我想提供的信息可能会有所帮助,请告诉我.
这可能不是答案,但我已经做了 I wrote some simple jQuery code to try and hide rows of an html table based on the data inside one of the rows columns. The code I wrote works fine in all browsers except IE8, where it completely crashes (IE stops responding, tries to reload the tab and than reports that the page could not load). If I include the page no longer crashes, but it would be preferable to actually solve this issue rather than applying workarounds. Here is a sample of the HTML table, and the jQuery code I am using to hide/show rows. The line that seems to crash IE8 is: Any help would be greatly appreciated, also if there is any more information I could provide that could be helpful please let me know. This might not be an answer but I have made this jsfiddle and it works in all browsers (IE7->9, FF, Chrome). I have made some optimizations to your code btw:
这篇关于使用.hide()完全会使IE 8崩溃的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<table>
<thead> ... headers, table has 8 columns </thead>
<tbody>
<!--- The fifth column has a date I need to use to hide/show the rows -->
<tr> ... <td>9/27/2011</td> ... </tr>
...
</tbody>
</table>
function filterData() {
$("input[type='checkbox']:checked").attr("checked", false);
//This gets me the date to filter on
var filterDate = new Date($("#SelectedTimePeriod").val());
var minDate = new Date($("#SelectedTimePeriod").val());
minDate.setDate(filterDate.getDate() - 7 * $("#SelectedTimeRange").val());
var maxDate = new Date($("#SelectedTimePeriod").val());
maxDate.setDate(filterDate.getDate() + 7 * $("#SelectedTimeRange").val());
$("tbody tr td:nth-child(5)").each(function () {
var rowDate = new Date($(this).text());
if (rowDate.getTime() < minDate.getTime() || rowDate.getTime() > maxDate.getTime())
$(this).parent().hide();
else
$(this).parent().show();
});
}
$(this).parent().hide();
// cache your "static" elements from the page, no need to query for them all the time
var $table = $('table'),
$timePeriod = $("#SelectedTimePeriod");
function filterData() {
// only input[type=checkbox] can be "checked" so just write "input:checked"
// use .prop() for special attributes like checked, selected, disabled...
$table.find('input:checked').prop("checked", false);
// select the value once for TimePeriod
var timePeriodVal = $timePeriod.val();
var filterDate = new Date(timePeriodVal);
var minDate = new Date(timePeriodVal);
minDate.setDate(filterDate.getDate() - 7);
var maxDate = new Date(timePeriodVal);
maxDate.setDate(filterDate.getDate() + 7);
// your initial selector was too long
// find the "tbody" once and only select "td". you can omit "tr", "td" only exist in "tr" anyway
$table.find('tbody')
.find('td:nth-child(5)').each(function() {
// select $(this) once and re-use
var $this = $(this),
rowDate = new Date($this.text());
// explicitly mark { } and ';' to avoid misinterpretation by browsers
if (rowDate.getTime() < minDate.getTime() || rowDate.getTime() > maxDate.getTime()) {
$this.parent().hide();
}
else {
$this.parent().show();
}
});
}