jQuery Traversal - end() Method

jQuery πλοήγηση αναγνωριστικό εγχειρίδιο

Example

Select all paragraphs, find the span elements within these paragraphs, and then restore them to paragraphs, setting the paragraphs to have a 2-pixel red border:

$("p").find("span").end().css("border", "2px red solid");

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

Definition and usage

The end() method ends the most recent filter operation in the current chain and restores the matching element set to its previous state.

Syntax

.end()

Detailed explanation

Many jQuery traversal methods operate on a jQuery object instance and generate a new object that matches a set of different DOM elements. When this happens, the new element set should be pushed into the stack maintained in the object. Each successful filter method call pushes the new element into the stack. If we need the old element set, we can use end() to pop the new collection from the stack.

Ανάλογα με το περιεχόμενο της σελίδας, υπάρχουν δύο πολύ μικρά καταλόγους:

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

Παράδειγμα 1

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

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

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

Αυτό το κλιμάκιο εντολών αναζητά τον πρώτο κατάλογο για το στοιχείο με την κλάση foo και αλλάζει το χρώμα του υποβάθρου σε κόκκινο. Η end() θα επαναφέρει το αντικείμενο στην κατάσταση πριν την κλήση του find(), οπότε η δεύτερη find() αναζητά το '.bar' μέσα στο <ul class="first">, όχι μέσα στο <li class="foo">, και αλλάζει το υποβάθρο των ταιριάζοντων στοιχείων σε πράσινο. Το τελικό αποτέλεσμα είναι ότι τα στοιχεία 1 και 3 του πρώτου καταλόγου έχουν ρυθμιστεί με χρωματιστό υποβάθρο, ενώ τα στοιχεία του δεύτερου καταλόγου δεν έχουν καμία αλλαγή.

Παράδειγμα 2

Αυτό το μακρύ κείμενο jQuery μπορεί να αντιπροσωπευτεί ως δομημένο τμήμα κώδικα, ανοίγοντας τα υποκείμενα τμήματα κώδικα με τις μεθόδους φιλτράρισμα, ενώ η μέθοδος end() χρησιμοποιείται για το κλείσιμο των τμημάτων κώδικα:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

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

Τελευταία, η end() δεν είναι απαραίτητη,因为我们 αργότερα θα πετάξουμε αυτό το jQuery αντικείμενο. Ωστόσο, αν γράψουμε κώδικα με αυτή τη μορφή, η end() μπορεί να παρέχει οπτική συμμετρία, καθώς και αίσθηση τάξης στο πρόγραμμα, τουλάχιστον για τους προγραμματιστές που είναι πιο εύκολο να το διαβάσουν, βέβαια με κόστος την απώλεια από επιπλέον κλήσεις, θα υπάρξει μια μικρή απώλεια απόδοσης.

jQuery πλοήγηση αναγνωριστικό εγχειρίδιο