Παρακαλώ διαβάστε το παράδειγμα: .find() μεθόδος

Εγχειρίδιο αναζήτησης jQuery

Παράδειγμα

Αναζητήστε όλους τους απογόνους του στοιχείου p και ρυθμίστε το χρώμα τους σε κόκκινο:

$("p").find("span").css('χρώμα','κόκκινο');

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

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

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

Γλώσσα

.find(selector)
Παράμετροι Περιγραφή
selector Τροφοδοσία τιμής κειμένου, που περιέχει την έκφραση επιλογής που χρησιμοποιείται για την αντιστοίχιση της τρέχουσας συλλογής στοιχείων.

Λεπτομερής περιγραφή

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

Η πρώτη χαρακτηριστική λειτουργία της μεθόδου .find() είναι ότι αποδέχεται την έκφραση επιλογής που παρέχουμε στη συνάρτηση $(), με τον ίδιο τύπο. Θα φιλτράρει τα στοιχεία με βάση αν ταιριάζουν στην έκφραση.

Προσέξτε την παρακάτω απλή αναγνωριστική λίστα:

<ul class="level-1">
  <li class="item-i">I</li>
  <li 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>

Θα ξεκινήσουμε από τη λίστα II για να βρούμε τα στοιχεία της λίστας που περιέχονται σε αυτήν:

$('li.item-ii').find('li').css('background-color', 'red');

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

Το αποτέλεσμα της έρευνας είναι ότι τα έργα A, B, 1, 2, 3 και C έχουν οριστεί με φόντο κόκκινο. Ε zelfs als het item II overeenkomt met de expressie van de selectie, het wordt niet opgenomen in de resultaten; alleen de afstammelingen worden gematcht.

Διαφορετικά από τις άλλες μεθόδους αναζήτησης δέντρου, η έκφραση επιλογέα είναι απαραίτητη για το .find(). Αν χρειάζεται να επιστρέψουμε όλους τους απογόνους, μπορούμε να μεταφέρουμε τον γενικό επιλογέα '*'.

Ο επιλογέας κείμενο είναι υλοποιημένος από τη μέθοδο .find(); επομένως, $('li.item-ii').find('li') είναι ίσο με $('li', 'li.item-ii').

Για την jQuery 1.6, μπορούμε επίσης να χρησιμοποιήσουμε τη δεδομένη συλλογή jQuery ή το στοιχείο για την επιλογή. Επίσης η συγκεκριμένη λίστα με στρώματα, πρώτα γράφουμε:

var $allListElements = $('li');

Στη συνέχεια, μεταφέρετε τον συγκεκριμένο αντικειμενο jQuery στη μέθοδο find:

$('li.item-ii').find( $allListElements );

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

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

Παρόμοια, μπορείτε επίσης να μεταφέρετε ένα στοιχείο:

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

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

Το αποτέλεσμα της συγκεκριμένης κλήσης είναι ότι το έργο 1 έχει οριστεί με φόντο κόκκινο.

Εγχειρίδιο αναζήτησης jQuery