Παράδειγμα jQuery - Φίλοι

Τα αδέρφια έχουν τον ίδιο γονέα.

Με το jQuery, μπορείτε να εξερευνήσετε τα αδέρφια των στοιχείων στο δέντρο DOM.

Επίπεδη εξερεύνηση στο δέντρο DOM

Υπάρχουν πολλές χρήσιμες μεθόδους που μας επιτρέπουν να κάνουμε επίπεδη εξερεύνηση στο δέντρο DOM:

  • siblings
  • next
  • nextAll
  • nextUntil
  • prev
  • prevAll
  • prevUntil

jQuery siblings() μέθοδος

Η μέθοδος siblings() επιστρέφει όλα τα αδέρφια του επιλεγμένου στοιχείου.

Το παρακάτω παράδειγμα επιστρέφει όλα τα αδέρφια του στοιχείου <h2>:

Παράδειγμα

$(document).ready(function(){
  $("h2").siblings();
});

Προσπάθησε το εαυτό σου

Μπορείτε επίσης να χρησιμοποιήσετε επιλογή παραμέτρος για να φιλτράρετε την αναζήτηση για αδέρφια.

Το παρακάτω παράδειγμα επιστρέφει όλα τα στοιχεία <p> που ανήκουν στα αδέρφια του στοιχείου <h2>:

Παράδειγμα

$(document).ready(function(){
  $("h2").siblings("p");
});

Προσπάθησε το εαυτό σου

jQuery next() μέθοδος

Η μέθοδος next() επιστρέφει το επόμενο αδέρφιο του επιλεγμένου στοιχείου.

Η μέθοδος next() επιστρέφει μόνο ένα στοιχείο.

Το παρακάτω παράδειγμα επιστρέφει το επόμενο αδέρφιο του στοιχείου <h2>:

Παράδειγμα

$(document).ready(function(){
  $("h2").next();
});

Προσπάθησε το εαυτό σου

jQuery nextAll() μέθοδος

Η μέθοδος nextAll() επιστρέφει όλα τα αδέρφια του επιλεγμένου στοιχείου.

Το παρακάτω παράδειγμα επιστρέφει όλα τα αδέρφια μετά το στοιχείο <h2>:

Παράδειγμα

$(document).ready(function(){
  $("h2").nextAll();
});

Προσπάθησε το εαυτό σου

jQuery nextUntil() μέθοδος

Η μέθοδος nextUntil() επιστρέφει όλα τα αδέρφια μεταξύ των δύο δεδομένων παραμέτρων.

Το παρακάτω παράδειγμα επιστρέφει όλα τα αδέρφια μεταξύ των στοιχείων <h2> και <h6>:

Παράδειγμα

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

Προσπάθησε το εαυτό σου

jQuery prev(), prevAll() και prevUntil() μεθόδους

prev(), prevAll() και prevUntil() μεθόδους λειτουργούν με τον ίδιο τρόπο με τις παραπάνω μεθόδους, αλλά με αντίθετη κατεύθυνση: επιστρέφουν τα προηγούμενα αδέρφια στο DOM δέντρο (παράκαμψε τα αδέρφια του στο δέντρο DOM προς τα εμπρός, όχι προς τα πίσω).

jQuery αναγνωριστικός οδηγός βρόχου

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