Why does jQuery's :visible selector include hidden TRs on IE8?

2023-01-16 18:21 问答作者：

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.)