Επιλογέας 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');
});
