Przejście jQuery - metoda .is()

Przewodnik do przeglądania jQuery

Przykład

Zwraca false, ponieważ rodzic elementu input jest elementem p:

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

Spróbuj sam

Definicja i użycie

Metoda .is() na podstawie selektora, elementu lub obiektu jQuery sprawdzает zestaw pasujących elementów, zwracając true, jeśli przynajmniej jeden z tych elementów pasuje do podanych parametrów.

Gramatyka

.is(selector)
Parametry Opis
selector Wartość ciągła, zawierająca wyrażenie selekcyjne dla pasujących elementów.

Szczegółowe wyjaśnienie

Inaczej niż inne metody filtrowania, .is() nie tworzy nowego obiektu jQuery. Zamiast tego pozwala na sprawdzanie obiektu jQuery bez modyfikowania jego zawartości. To jest szczególnie przydatne wewnętrznie, np. w programach obsługi wydarzeń.

Załóżmy, że mamy listę, w której dwa elementy zawierają elementy potomne:

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

Możesz dodać programista kliknięcia do elementu <ul>, a następnie ograniczyć kod do sytuacji, w której wywoływany jest tylko sam element listy, a nie jego elementy potomne:

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

Spróbuj sam

Teraz, gdy użytkownik kliknie na słowo "list" w pierwszym elemencie listy lub na jakieś słowo w trzecim elemencie listy, kliknięty element listy zostanie ustawiony na czerwony kolor tła. Jednakże, gdy użytkownik kliknie na "item 1" w pierwszym elemencie listy lub na jakieś słowo w drugim elemencie listy, nie będzie żadnych zmian, ponieważ w tych przypadkach celem wydarzenia jest <strong>jest <span>.

Proszę zauważyć, że dla wyrażeń selektorów pozycyjnych, takich jak :first, :gt() lub :even, pozycyjne filtrowanie jest przeprowadzane na jQuery obiektach przekazanych do .is(), a nie na całym dokumencie. Dlatego wyrażenie $("li:first").is("li:last") zwraca true, ale $("li:first-child").is("li:last-child") zwraca false.

Użycie funkcji

Druga metoda użycia tej metody polega na wyrażeniach wywoływanych na podstawie funkcji zamiast selektorów. Dla każdego elementu, jeśli funkcja zwraca true, to .is() również zwraca true. Na przykład, poniżej jest bardziej złożony fragment HTML:

<ul>
  <li><strong>list</strong> item 1 - jeden strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    dwa <span>znaki strong</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Możesz dodać programista click do każdego <li>, aby obliczyć liczbę elementów <strong> wewnątrz klikniętego <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");
  }
});

Spróbuj sam

Przewodnik do przeglądania jQuery