jQuery-Abfrage - is() Methode

jQuery 遍历参考手册

Beispiel

Gibt false zurück, da der Vater des input-Elements ein p-Element ist:

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

亲自试一试

Definition und Verwendung

is() prüft die passenden Elemente basierend auf dem Selector, dem Element oder dem jQuery-Objekt. Wenn mindestens eines dieser Elemente dem angegebenen Parameter entspricht, wird true zurückgegeben.

Syntax

.is(selector)
Parameter Beschreibung
selector Zeichenkette, die einen Auswahlerpress ausdrückt, der die passenden Elemente enthält.

Detaillierte Erklärung

Im Gegensatz zu anderen Filtermethoden erstellt .is() keine neuen jQuery-Objekte. Stattdessen ermöglicht es es uns, sie zu prüfen, ohne den Inhalt des jQuery-Objekts zu ändern. Dies ist im Callback intern oft nützlich, z.B. in Ereignisbehandlern.

Angenommen, wir haben eine Liste, in der zwei Punkte Subelemente enthalten:

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

Sie können einen Click-Handler zum <ul>-Element hinzufügen und den Code so beschränken, dass er nur ausgelöst wird, wenn der Listenpunkt selbst, und nicht ein Unterlement, geklickt wird:

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

亲自试一试

Jetzt wird der geklickte Listenpunkt mit rotem Hintergrund gesetzt, wenn der Benutzer auf das Wort "list" im ersten Listenpunkt oder auf irgendein Wort im dritten Listenpunkt klickt. Wenn der Benutzer jedoch auf "item 1" im ersten Listenpunkt oder auf irgendein Wort im zweiten Listenpunkt klickt, passiert nichts. Dies liegt daran, dass das Ziel des Events in diesen Fällen <strong> ist <span>.

请您注意，对于带有位置性选择器的选择器表达式字符串，比如 :first、:gt() 或者 :even，位置性筛选是针对传递到 .is() 的 jQuery 对象进行的，而非针对包含文档。所以对于上面的 HTML 来说，诸如 $("li:first").is("li:last") 的表达式返回 true，但是 $("li:first-child").is("li:last-child") 返回 false。

使用函数

该方法的第二种用法是，对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说，如果该函数返回 true，则 .is() 也返回 true。例如，下面是稍微复杂的 HTML 片段：

<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>

您可以向每个 <li> 添加 click 处理程序，以计算在被点击的 <li> 内部 <strong> 元素的数目：

$("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");
  }
);

亲自试一试

jQuery 遍历参考手册