使用.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

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

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.

<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();
            });
        }

The line that seems to crash IE8 is:

$(this).parent().hide();

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:

// 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();
        }

    });
}

这篇关于使用.hide()完全会使IE 8崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！