ตัวเลือก visible

ตัวเลือก :visible เลือกองค์ประกอบทั้งหมดที่มองเห็นได้ บนหน้า องค์ประกอบที่มี visibility: hidden หรือ opacity: 0 ถูกนับว่ามองเห็นได้ เนื่องจากยังคงใช้ พื้นที่ในการจัดเลย์เอาต์ องค์ประกอบจะถูกนับว่ามองเห็นได้ หากมันยังใช้ พื้นที่ในเอกสาร องค์ประกอบที่มองเห็นได้มีความสูง และความกว้างที่มากกว่า 0 เนื่องจาก :visible ไม่ได้อยู่ในข้อกำหนด CSS, เพื่อเพิ่มประสิทธิภาพในเบราว์เซอร์สมัยใหม่ ควรกรององค์ประกอบตั้งแต่เริ่มต้นด้วย การใช้ตัวเลือก CSS ล้วนๆ ก่อน แล้วหลังจากนั้น ค่อยใช้ .filter(':visible') การติดตามการมองเห็นขององค์ประกอบด้วยวิธีอื่น ตัวอย่างเช่น โดยใช้คลาส สามารถ ทำให้มีประสิทธิภาพที่ดีกว่าได้

ไวยากรณ์

นี่คือวิธีที่เราเลือกองค์ประกอบที่มองเห็นได้:

javascript$(':visible');

ตัวอย่าง

เมื่อคลิกที่ปุ่ม ให้แสดงสี่เหลี่ยมที่มองไม่เห็น เมื่อกดที่สี่เหลี่ยมที่ "มองเห็นได้" พื้นหลังของพวกมัน จะเปลี่ยนเป็นสีเหลือง:

html<button id="show">แสดง</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('div:visible').click(function() {
  $(this).css('background', 'yellow');
});

$('#show').click(function() {
  $('div:hidden').show('slow');
});

ดูเพิ่มเติม