jQuery αναζήτηση - μεθόδος closest()

jQuery Εκτρέπηση Εγχειρίδιο

Παράδειγμα

Αυτό το παράδειγμα δείχνει πώς μπορεί να γίνει event delegation με το closest(). Όταν ο πιο κοντινός στοιχείο λίστας ή τα υποστελέχη του γίνεται κλικ, το πέλμα γίνεται κίτρινο:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Δοκιμάστε το προσωπικά

Ορισμός και χρήση

Η μεθόδος .closest() αποδίδει το πρώτο προγονικό στοιχείο που ταιριάζει στον επιλογέα, ξεκινώντας από το τρέχον στοιχείο και προχωρώντας στον πίνακα DOM προς τα πάνω.

Γραμματική

.closest(selector)
Παράμετροι Περιγραφή
selector Αξία αλφαριθμητική, περιέχει μια έκφραση επιλογέα που ταιριάζει στο στοιχείο που ταιριάζει

Περιγραφή

Αν δοθεί ένα jQuery αντικείμενο που αντιπροσωπεύει μια συλλογή στοιχείων DOM, η μεθόδος .closest() μας επιτρέπει να ανακτήσουμε τα στοιχεία του πίνακα DOM αυτών και τους προγονικούς τους στοιχεία, και να δημιουργήσουμε ένα νέο jQuery αντικείμενο με βάση τα στοιχεία που ταιριάζουν..parents() Όπως και με το .closest() μεθόδους, και οι δύο προχωρούν στον πίνακα DOM προς τα πάνω. Η διαφορά μεταξύ τους είναι μικρή, αλλά σημαντική:

.closest() .parents()
Ξεκινά από το τρέχον στοιχείο Ξεκινά από το γονικό στοιχείο
Προχωρεί στον πίνακα DOM προς τα πάνω μέχρι να βρει ένα στοιχείο που ταιριάζει στον επιλογέα. Προχωρεί στον πίνακα DOM προς τα πάνω μέχρι να βρει το ρίζα στοιχείο του έγγραφου, προσθέτοντας κάθε προγονικό στοιχείο σε μια προσωρινή συλλογή; Αν εφαρμόστηκε ένας επιλογέας, τότε η συλλογή αυτή θα φιλτράρευται με βάση τον επιλογέα.
Επιστρέφει ένα jQuery αντικείμενο που περιέχει μηδέν ή έναν στοιχεία Επιστρέφει ένα jQuery αντικείμενο που περιέχει μηδέν, έναν ή πολλαπλούς στοιχεία

Παρακαλώ δείτε τον παρακάτω κώδικα HTML:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Παράδειγμα 1

Ας υποθέσουμε ότι εκτελούμε μια αναζήτηση από το στοιχείο A για το στοιχείο <ul>:

$('li.item-a').closest('ul').css('background-color', 'red');

Δοκιμάστε το προσωπικά

Αυτό θα αλλάξει το χρώμα του level-2 <ul>, γιατί θα συναντήσουμε πρώτα αυτό το στοιχείο κατά την ανόρθωση του δέντρου DOM.

Παράδειγμα 2

Ας υποθέσουμε ότι αναζητούμε το στοιχείο <li>:

$('li.item-a').closest('li').css('background-color', 'red');

Δοκιμάστε το προσωπικά

Αυτό θα αλλάξει το χρώμα του στοιχείου A της λίστας. Πριν από την ανόρθωση του δέντρου DOM, η μέθοδος .closest() θα ξεκινήσει από το στοιχείο li και θα συνεχίσει να αναζητά μέχρι να βρει το στοιχείο A.

Παράδειγμα 3

Μπορούμε να περάσουμε στοιχεία DOM ως contest, μέσα στο οποίο θα αναζητήσουμε το πλησιέστερο στοιχείο.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Δοκιμάστε το προσωπικά

Το παρακάτω κώδικας θα αλλάξει το χρώμα του level-2 <ul>, γιατί είναι και ο πρώτος προγονός του στοιχείου A <ul> και επίσης ο απογονός του στοιχείου II. Δεν θα αλλάξει το χρώμα του level-1 <ul>, γιατί δεν είναι απογονός του στοιχείου list item II.

jQuery Εκτρέπηση Εγχειρίδιο