jQuery-besök - is() metod

jQuery 遍历参考手册

Exempel

Returnerar false eftersom input-elementets förälder är p-elementet:

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

亲自试一试

Definition och användning

is() kontrollerar matchande elementkolektioner baserat på en väljare, element eller jQuery-objekt. Om minst ett element matchar de angivna parametrarna returneras true.

Syntaks

.is(selector)
Parameter Beskrivning
selector Strängvärde som innehåller en uttryckssyntax för matchande element.

Detaljerad förklaring

Och till skillnad från andra filtreringsmetoder skapar .is() inte en ny jQuery-objekt. Istället tillåter det oss att känna av jQuery-objektet utan att ändra dess innehåll. Detta är vanligtvis användbart inom callback, till exempel i händels hanterare.

Anta att vi har en lista där två poster innehåller underliggande element:

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

Du kan lägga till en click-handlare till <ul>-elementet och begränsa koden så att den bara triggas när listposten själv, inte underliggande element, klickas:

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

亲自试一试

Nu, när användaren klickar på ordet "list" i den första listposten eller på vilket ord som helst i den tredje listposten, sätts den klickade listposten till röd bakgrund. Men när användaren klickar på "item 1" i den första listposten eller på vilket ord som helst i den andra listposten, händer det ingenting, eftersom i dessa fall är målet för händelsen <strong>är <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 遍历参考手册