Tại sao <tr> ẩn của tôi không thực sự bị ẩn?

Question

Tôi có đánh dấu này html đơn giản được tạo ra từ asp cổ điển:

<table> 
    <tr class="trClass"> 
    <td>Hello </td> 
    </tr> 
    <tr class ="trClass"> 
    <td>World!</td> 
    </tr> 
</table> 

Nếu tôi đặt tr thuộc đến Hello để ẩn() sử dụng jquery nó ẩn. Tốt!

Nhưng, khi tôi sử dụng $ ('. TrClass: visible') mỗi (function() {alert ('visible')}); nó cho thấy đầu ra 'có thể nhìn thấy' hai lần.

Tại sao điều này?

Vấn đề của tôi ở đây là im lọc bảng trên cột có hộp chọn. Nhưng sau khi lọc tôi cần phải thực hiện một số tính toán trên những hàng có thể nhìn thấy trong bảng, nhưng tôi nhận được tất cả các hàng ngay bây giờ.

Bất kỳ ý tưởng nào?

/Daniel

Answer 1

Bộ chọn :visible không kiểm tra thuộc tính display phong cách, bạn muốn sử dụng :hidden thay vào đó, the 1.3.2 release notes say:

... nếu hiển thị CSS của yếu tố của bạn là "none", hoặc bất kỳ màn hình nào của phần tử cha/tổ tiên của nó là "none", hoặc nếu chiều rộng của thành phần là 0 và chiều cao của phần tử là 0 thì phần tử sẽ là được báo cáo là ẩn.

Đây sẽ chọn một cách chính xác có thể nhìn thấy hàng của bạn:

$('.trClass:not(:hidden)').each(function() { 
    alert('visible'); 
}); 

hay:

$('.trClass').each(function() { 
    if(!$(this).is(':hidden')) { 
     alert('visible'); 
    } 
}); 

hay:

$('.trClass').filter('not:(:hidden)').each(function() { 
    alert('visible'); 
}); 

hide đặt phong cách để display="none". Các release notes cho jQuery 1.3.2 cũng nói:

Trong jQuery 1.3.2 một yếu tố có thể nhìn thấy nếu trình duyệt báo cáo offsetWidth hoặc nó offsetHeight lớn hơn 0.

vì vậy tôi đoán trong trường hợp này, bộ chọn :visible sai không khớp với bất kỳ thứ gì vì các hàng không chiếm bất kỳ khoảng trống nào theo các tính toán được thực hiện, mặc dù thực tế thuộc tính CSS display của chúng là không được đặt thành none. Ngược lại, :hidden đối sánh chính xác các thành phần với style="display:none" để thử nghiệm cho các thành phần không :hidden hoạt động tốt.

Answer 2

Bạn không chắc chắn điều này có quan trọng hay không, nhưng không ẩn() đặt display: none; chứ không phải visible: hidden? Có nghĩa là một hàng ẩn vẫn hiển thị, nó không được hiển thị ...

Answer 3

rất có thể trClass của bạn va chạm với màn hình: không có bộ .hide() nào. khi thẻ chỉ có thuộc tính lớp và thuộc tính kiểu sẽ được áp dụng. bạn nên inpsect chặt chẽ trClass của bạn và đưa ra màn hình: các công cụ từ nó.

Answer 4

You've found a legitimate bug. Nó bị hỏng trong 1.3.2 nhưng bây giờ là fixed in trunk.

According to Resig:

chúng tôi đã tìm kiếm các trường hợp 'tr' trong đó có cùng một vấn đề, trong IE

tưởng bạn muốn biết ...