विज़िबल सेलेक्टर
सेलेक्टर :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');
});
