Bộ chọn visible
Bộ chọn :visible chọn tất cả các phần tử hiển thị
trên trang.
Các phần tử có visibility: hidden hoặc có
opacity: 0 được coi là hiển thị, vì chúng chiếm
chỗ trong bố cục.
Các phần tử được coi là hiển thị nếu chúng chiếm
chỗ trong tài liệu. Các phần tử hiển thị có chiều cao
và chiều rộng khác 0.
Vì :visible không thuộc đặc tả CSS,
nên để cải thiện hiệu suất trong các
trình duyệt hiện đại, tốt hơn hết trước tiên nên lọc các phần tử với
việc sử dụng bộ chọn css thuần túy, sau đó
áp dụng .filter(':visible').
Theo dõi tính hiển thị của các phần tử bằng các phương pháp khác,
ví dụ, bằng cách sử dụng lớp, có thể
đảm bảo hiệu suất tốt hơn.
Cú pháp
Chúng ta chọn các phần tử hiển thị như thế này:
$(':visible');
Ví dụ
Hãy để khi nhấp vào nút, chúng ta hiển thị các hình vuông vô hình. Khi nhấn vào các hình vuông "hiển thị", nền của chúng sẽ đổi thành màu vàng:
<button id="show">hiển thị</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
