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

Δείτε επίσης