Εργασία με την μέθοδο each στο jQuery

Όταν έχουμε μια ομάδα στοιχείων που ελήφθησαν με τη βοήθεια του jQuery, μπορούμε να κάνουμε αλλαγές σε αυτά μόνο για όλα τα στοιχεία ταυτόχρονα.

Για παράδειγμα, αν θέλουμε να αλλάξουμε το κείμενο όλων των παραγράφων που βρέθηκαν - δεν θα μπορέσουμε να το κάνουμε διαφορετικό.

Σε αυτή την περίπτωση θα μας βοηθήσει η ειδική μέθοδος each, η οποία επιτρέπει την εφαρμογή μιας συνάρτησης για όλα τα στοιχεία ενός συνόλου jQuery. Εντός αυτής της συνάρτησης μπορούμε να διαχωρίσουμε τα στοιχεία και να ενεργήσουμε διαφορετικά με κάθε ένα από αυτά.

Ουσιαστικά η each είναι ένας βρόχος, με τη βοήθεια του οποίου μπορούμε να επαναλάβουμε σε όλα τα στοιχεία που βρέθηκαν. Ο σύνδεσμος προς εκείνο το στοιχείο, στο οποίο αυτή τη στιγμή περνάει ο βρόχος θα βρίσκεται στο this.

Μπορούμε απλά να χρησιμοποιήσουμε αυτό το this σε καθαρό JavaScript, όπως κάναμε πριν, για παράδειγμα, έτσι - this.innerHTML - και να εμφανίσουμε το εσωτερικό περιεχόμενο των στοιχείων μας. Αλλά είναι καλύτερα να τυλίξουμε το this σε δολάριο jQuery με αυτόν τον τρόπο - $(this) - σε αυτή την περίπτωση θα μπορούμε να εφαρμόσουμε σε αυτό όλες τις μεθόδους και τις αλυσίδες του jQuery.

Ας δούμε τον ακόλουθο κώδικα HTML:

<p class="www">κείμενο</p>
<p class="www">κείμενο</p>
<p class="www">κείμενο</p>
<p>κείμενο</p>

Σε αυτό το παράδειγμα πρέπει να λάβουμε όλα τα στοιχεία με την κλάση www και να εμφανίσουμε στην οθόνη το περιεχόμενό τους. Πώς γίνεται αυτό: με τη βοήθεια του $('.www') παίρνουμε τα στοιχεία που χρειαζόμαστε, έπειτα με τη βοήθεια του each(test) εφαρμόζουμε σε κάθε στοιχείο που λάβαμε τη συνάρτηση test. Αυτή πρώτα θα εφαρμοστεί στην πρώτη παράγραφο, μετά στη δεύτερη, στην τρίτη και ούτω καθεξής.

Εντός της συνάρτησης το this θα δείχνει προς εκείνο το στοιχείο, στο οποίο εφαρμόζεται η συνάρτηση test - πρώτα θα είναι το πρώτο στοιχείο, μετά το δεύτερο, και ούτω καθεξής. Με τη βοήθεια μιας τέτοιας κατασκευής $(this) αντί για το συνηθισμένο this από το JavaScript θα πάρουμε ένα στοιχείο jQuery και θα εφαρμόσουμε σε αυτό τη μέθοδο html, η οποία θα πάρει το κείμενο του στοιχείου μας. Έπειτα, απλώς θα εμφανιστεί στην οθόνη:

/*
	Γράφουμε το όνομα της συνάρτησης test χωρίς εισαγωγικά και (),
	επειδή χρειαζόμαστε τον κώδικά της, και όχι το αποτέλεσμα:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Για την επίλυση αυτού του προβλήματος μπορούν να χρησιμοποιηθούν και ανώνυμες συναρτήσεις - αυτό γίνεται πιο συχνά:

$('.www').each(function() {
	alert($(this).html());
});

Επίσης, μπορούμε να περάσουμε στη μέθοδο each μια callback-συνάρτηση με παραμέτρους.

Ας προσθέσουμε στο επόμενο παράδειγμα στο τέλος όλων των li στη σελίδα τον τακτικό τους αριθμό. Τώρα στην ανώνυμη συνάρτησή μας θα περάσουμε τον αριθμό του στοιχείου και το ίδιο το στοιχείο:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Και τώρα αντί για elem χρησιμοποιούμε το this:

$('li').each(function (index) {
	$(this).append(index);
});

Αλλάξτε το περιεχόμενο όλων των li με τον τακτικό τους αριθμό.