Internet Explorer jQuery错误

Question

I am using JQuery min 1.4.2. I have a function which iterates through a few tables and adds a class with a number attached:

$("#reportArea table", this).each(function(i){
$(this).addClass("table-" + i);
});

For some reason this throws an error in IE 8 and IE9, however, in Firefox and Chrome when I open console, I do not see any errors. The error in IE is:

Message: Invalid argument.
Line: 48
Char: 1
Code: 0
URI: /js/jquery-min.js

If I look at line 48 in the IE debugger, I see this:

a[b]=d}if(c.nodeName(a,"form")&&a.getAttributeNode(b))return a.getAttributeNode(b).nodeValue; etc.. 

I also tried rephrasing my code to this but still get the same error:

$('#reportArea table:eq(0)').addClass('table-0');
$('#reportArea table:eq(1)').addClass('table-1');

The odd part is that the class still gets added to the tables in IE.

Note, I would add the classes manually but it's a JSP Report page and I don't have access to the specific template that controls this page.

Answer 1

$("#reportArea table", this).each(...
                       ^^^^

What is this in here? It should be a DOM context . I don't think you need it for your selector as ids are (should be) unique. If you're not calling that function inside a specific function, the this keyword might reference the global object and therefore cause the error.