Ένα άλλο πρωτότυπο βίντεο! Αυτό είναι "μόνο ένα από αυτά" που πρέπει να καταλάβετε στο jQuery. Είναι στην πραγματικότητα λίγο μοναδικό για το jQuery, καθώς άλλες δημοφιλείς βιβλιοθήκες JavaScript στο παρελθόν δεν το έχουν κάνει με αυτόν τον τρόπο.
Έχουμε ήδη καλύψει αρκετούς επιλογείς. Για παράδειγμα, γνωρίζετε ήδη ότι $("p")θα επιλέξουν όλες τις παραγράφους σε μια σελίδα. Όχι μόνο το πρώτο ή το τυχαίο, όλα. Μπορείτε εύκολα να φανταστείτε ότι μπορεί να υπάρχουν πολλά από αυτά σε μια σελίδα. Τώρα φανταστείτε τι συμβαίνει όταν το κάνετε:
$("p").hide();Όλοι τους κρύβονται σωστά; Σωστά. Όχι το πρώτο ή το τυχαίο, όλα. Αυτό συνεπάγεται επανάληψη . Πίσω από τα παρασκήνια, το jQuery περιβάλλει αυτόματα ολόκληρο το σύνολο στοιχείων που βρήκε και εκτελεί τη μέθοδο που έχετε επιλέξει. Δεν χρειάζεται κυριολεκτικά να γράψουμε τους εαυτούς μας για να το κάνουμε αυτό. Φαίνεται αρκετά προφανές εάν εισαγάγετε το JavaScript είναι το jQuery, αλλά πολλές βιβλιοθήκες στο παρελθόν απαιτούν από εσάς να παρακολουθήσετε τις συλλογές στοιχείων μόνοι σας.
Εάν θέλετε, μπορείτε να γράψετε μόνοι σας το βρόχο. Ίσως μοιάζει έτσι, χρησιμοποιώντας μεθόδους επανάληψης jQuery:
$("p").each(function() ( $(this).hide(); ));Αυτό είναι σχεδόν το ίδιο πράγμα. Όχι απαραίτητα, αλλά θα μπορούσατε. Αυτή είναι η ρητή επανάληψη .
Μερικές φορές πρέπει να κάνετε ρητή επανάληψη. Βασικά, αν χρειαστεί να αποκτήσουμε πρόσβαση στην τιμή thisκαι να κάνουμε κάτι ξεχωριστό με αυτό, θα χρειαστεί να δουλέψουμε με το δικό μας βρόχο.
Το παράδειγμα σε αυτό το screencast ήταν η μέτρηση των χαρακτήρων σε στοιχεία λίστας και προσθήκη του στο τέλος της συμβολοσειράς. Θα χρειαστεί ρητή επανάληψη για αυτό.
Δείτε το στυλό 4b53b9f55662d0d26339e18277500eee από τον Chris Coyier (@chriscoyier) στο CodePen
Χρησιμοποιήσαμε τη μέθοδο jQuery's () εδώ που είναι ιδανική για αυτό που χρειαζόμαστε. Ένα χρήσιμο κομμάτι που κάνει για εμάς είναι να μας δώσει έναν μετρητή μηδενικού δείκτη σε κάθε επανάληψη στην οποία μπορούμε να έχουμε πρόσβαση, αν χρειαστεί.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2