jQuery-beschouwing - is() methode

jQuery 遍历参考手册

Voorbeeld

Retourneert false, omdat de ouder van het input-element een p-element is:

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

亲自试一试

Definitie en gebruik

is() detecteert elementen die overeenkomen met de selector, het element of de jQuery-object, en retourneert true als ten minste één van deze elementen overeenkomt met de gegeven parameter.

Syntax

.is(selector)
Parameters Beschrijving
selector Stringwaarde die een selector-expressie bevat die overeenkomende elementen bevat.

Uitleg

Anders dan andere filtermethoden maakt .is() geen nieuwe jQuery-object aan. In plaats daarvan staat het ons toe om te detecteren zonder de inhoud van de jQuery-object te wijzigen. Dit is meestal nuttig binnen callbacks, zoals event handlers.

Stel dat we een lijst hebben waarin twee items subelementen bevatten:

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

U kunt een click-behandelaar toevoegen aan het <ul>-element en de code beperken tot alleen wanneer het item zelf, en niet de subelementen, wordt geklikt:

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

亲自试一试

Nu, wanneer de gebruiker op het eerste item van de lijst op de woorden "list" klikt of op een willekeurige woord van het derde item, wordt het betreffende item rood achtergrond ingesteld. Echter, wanneer de gebruiker op "item 1" van het eerste item of op een willekeurige woord van het tweede item klikt, gebeurt er niets, omdat in deze situatie het doel van het evenement respectievelijk <strong>is</strong> <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 遍历参考手册