jQuery's :visible selector seems not to work on TR elements in Internet Explorer 8 in the sense that includes TRs that have been hidden with hide(). Here is a test case:
<html>
<head>
<script language="JavaScript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript">
$(document).ready(function () {
$('#trb').hide();
$('#trcount').html($('tr:visible').length);
$('#pb').hide();
$('#pcount').html($('p.item:visible').length);
});
</script>
</head>
<body>
<table>
<tr><td>A</td></tr>
<tr id="trb"><td>B</td></tr>
<tr><td>C</td></tr>
</table>
<p><span id="trcount">?</span> rows are visible.</p>
<p>Using paragraphs:</p>
<p class="item">A</p>
<p class="item" id="pb">B</p>
<p class="item">C</p>
<p><span id="pcount">?</span> paragraphs are visible.</p>
</body>
</html>
On Chrome, it results in “2 rows are visible” and “2 paragraphs are visible,” as expected. On Internet Explorer 8, however, the result is “3 rows are visible” and “2 paragraphs” are visible.
Why? And what is the best way to work around it? (The best I can think of it to add a CSS class when I hide an item.)
