ตัวเลือก visible
ตัวเลือก :visible เลือกองค์ประกอบทั้งหมดที่มองเห็นได้
บนหน้า
องค์ประกอบที่มี visibility: hidden หรือ
opacity: 0 ถูกนับว่ามองเห็นได้ เนื่องจากยังคงใช้
พื้นที่ในการจัดเลย์เอาต์
องค์ประกอบจะถูกนับว่ามองเห็นได้ หากมันยังใช้
พื้นที่ในเอกสาร องค์ประกอบที่มองเห็นได้มีความสูง
และความกว้างที่มากกว่า 0
เนื่องจาก :visible ไม่ได้อยู่ในข้อกำหนด CSS,
เพื่อเพิ่มประสิทธิภาพในเบราว์เซอร์สมัยใหม่
ควรกรององค์ประกอบตั้งแต่เริ่มต้นด้วย
การใช้ตัวเลือก CSS ล้วนๆ ก่อน แล้วหลังจากนั้น
ค่อยใช้ .filter(':visible')
การติดตามการมองเห็นขององค์ประกอบด้วยวิธีอื่น
ตัวอย่างเช่น โดยใช้คลาส สามารถ
ทำให้มีประสิทธิภาพที่ดีกว่าได้
ไวยากรณ์
นี่คือวิธีที่เราเลือกองค์ประกอบที่มองเห็นได้:
$(':visible');
ตัวอย่าง
เมื่อคลิกที่ปุ่ม ให้แสดงสี่เหลี่ยมที่มองไม่เห็น เมื่อกดที่สี่เหลี่ยมที่ "มองเห็นได้" พื้นหลังของพวกมัน จะเปลี่ยนเป็นสีเหลือง:
<button id="show">แสดง</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');
});
