CODEWITHSUNDEEP
jqueryhtmlcssperformanceinternet-explorer
RulerNature
RulerNature

Reputation: 753

jQuery function performance on IE

I have this function that I use to do hover and focus for each row from two tables displayed in line when cursor pass over and focus on click for each tr. It works just fine but I have a problem with IE because is slowing down and I don't understand why. Can anyone tell me how to improve performance for this function?

Check live example: 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));
}

Thank you.

Upvotes: 4

Views: 299

Answers (2)

Dharmesh
Dharmesh

Reputation: 973

try this 

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228302

Could you not use a CSS-based hover instead? That would perform better in all browsers, particularly IE.

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

If you want to stick with JavaScript/jQuery, then I recommend you get rid of this:

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

This is forcing IE to use IE8 mode. IE8 mode is slower than IE9 mode.

Upvotes: 0

Related Questions