IE上jQuery函数的性能表现

Question

我有一个函数，用于在光标经过时为每个表中的每一行进行悬停和聚焦，并在单击时进行聚焦。它运行得很好，但我在IE中遇到了问题，因为速度变慢，我不明白为什么。有人能告诉我如何改进这个函数的性能吗？

查看实时示例：http://mainpage.ueuo.com/

function rowSelection(){
        var rows = $('.interactive tr');
        rows.click(function () {
            var i = $(this).GetIndex() + 1; // nth-child is 1-based
            rows.removeClass('selectedRow');
            rows.filter(':nth-child(' + i + ')').addClass('selectedRow');
        });
        rows.hover(function(){
            var i = $(this).GetIndex() + 1;
            rows.filter(':nth-child(' + i + ')').addClass('hoverx');
        },function(){         
            rows.removeClass('hoverx');
        });
    };

jQuery.fn.GetIndex = function(){
    return $(this).parent().children().index($(this));
}

谢谢。

- RulerNature

Answer 1

你能不能使用基于CSS的悬停效果呢？这样在所有浏览器中性能都会更好，特别是IE。

.interactive tr:hover td {
    background: lime !important;
}

如果你想继续使用JavaScript/jQuery，那么我建议你摆脱这个：

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

这将强制IE使用IE8模式。IE8模式比IE9模式慢。

- thirtydot

---

@Dharmesh：如果需要支持IE6，他可以使用（改进后的）JavaScript来实现，但仅限于IE6。为什么要给所有浏览器提供“慢”的版本，只是为了迎合过时的垃圾IE6呢？ - thirtydot

然而，在IE8中，CSS提供的对tr的hover和focus效果不起作用，更重要的是，我无法同时在两个以内联方式显示的表格上实现这一效果。请查看示例以更好地理解。 - RulerNature

我弄错了选择器，非常抱歉。已经修复。 - thirtydot

Answer 2

试试这个

$(document).ready(function(){

 $(".interactive tr").hover(function() {
   $(this).addClass("hoverx");
    }, function() {
   $(this).removeClass("hoverx");
  });

 $(".interactive tr").click(function() {
  $(".interactive tr.selectedRow").removeClass("selectedRow");
     $(this).addClass("selectedRow");
  });​ 
});

- Dharmesh

---

不错，但是它不能在两个表格上同时工作。我有两个表格并排显示，我使用我的函数。悬停和聚焦在每一行的两个表格上同时工作。请使用您的函数检查实时示例（然后尝试将我的函数添加到fiddle中以查看正确的行为）：http://jsfiddle.net/Ksb2W/41/ - RulerNature

仅在第一个表格上工作，查看描述中的实时示例以了解如何同时在两个表格上工作（悬停和聚焦），在您的 fiddle 示例中，它仅在第一个表格上工作。 - RulerNature