Παρακαλώ διαβάστε: is() μέθοδος jQuery

jQuery traversal reference manual

Παράδειγμα

Επιστρέφει false, επειδή ο γονέας του στοιχείου input είναι το στοιχείο p:

  var isFormParent = $("input[type='checkbox']").parent();.is("form");
  $("div").text("isFormParent = " + isFormParent);

Try it yourself

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

Η μέθοδος is() ελέγχει μια συλλογή στοιχείων που ταιριάζουν με τον δείκτη, το στοιχείο ή το objekt jQuery, και επιστρέφει true αν τουλάχιστον ένα από αυτά τα στοιχεία ταιριάζει με τον δοθέντα параметρ.

Γλώσσα

.is(selector)
Parametry Περιγραφή
selector Αξία řetězce, která obsahuje výraz výběru vyhovujících prvků.

Περιγραφή

Διαφορετικά από άλλες μεθόδους φιλτράρισματος, η .is() δεν δημιουργεί νέο αντικείμενο jQuery. Αντίθετα, επιτρέπει να ελέγχουμε αντικείμενα jQuery χωρίς να αλλάζουμε το περιεχόμενό τους. Αυτό είναι συχνά χρήσιμο εντός callback, όπως επεξεργαστές συμβάντων.

Ας υποθέσουμε ότι έχουμε μια λίστα όπου δύο από τα στοιχεία περιέχουν υποστοιχεία:

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

Μπορείτε να προσθέσετε έναν επεξεργαστή κλικ στο στοιχείο <ul> και να περιορίσετε τον κώδικα ώστε να εκτελείται μόνο όταν το στοιχείο της λίστας itself, και όχι τα υποστοιχεία του, γίνεται κλικ:

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
);

Try it yourself

Τώρα, όταν ο χρήστης κάνει κλικ στον πρώτο στοιχείο της λίστας με τη λέξη "list" ή σε οποιαδήποτε λέξη του τρίτου στοιχείου της λίστας, το στοιχείο που έχει κλικ شود θα έχει κόκκινο φόντο. Ωστόσο, όταν ο χρήστης κάνει κλικ στην λέξη item 1 του πρώτου στοιχείου ή σε οποιαδήποτε λέξη του δεύτερου στοιχείου της λίστας, δεν θα υπάρξει καμία αλλαγή, επειδή σε αυτές τις περιπτώσεις, το στόχος του συμβάντος είναι το <strong>είναι</strong> το <span>.

Please note that for selector expression strings with positional selectors, such as :first, :gt(), or :even, the positional filtering is for the jQuery object passed to .is(), not for the document. Therefore, for the above HTML, expressions like $("li:first").is("li:last") return true, but $("li:first-child").is("li:last-child") returns false.

Using a function

The second usage of this method is to evaluate an expression of related elements based on a function rather than a selector. For each element, if the function returns true, the .is() also returns true. For example, here is a slightly more complex HTML fragment:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

You can add a click handler to each <li> to calculate the number of <strong> elements inside the clicked <li>:

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    };
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
);

Try it yourself

jQuery traversal reference manual