jQuery-gennemgang - is() metode

jQuery 遍历参考手册

Eksempel

Returnerer false, fordi input-elementets forælder er p-elementet:

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

亲自试一试

Definition og brug

is() kontrollerer matchende elementkollektioner baseret på vælger, element eller jQuery-objekt. Hvis mindst én element matcher de givne parametre, returnerer det true.

Syntaks

.is(selector)
Parameter Beskrivelse
selector Strengværdi, der indeholder en vælgerudtryk, der matcher elementer.

Detaljeret forklaring

Adskillig fra andre filtreringsmetoder opretter .is() ikke en ny jQuery-objekt. I stedet tillader det os at udføre en kontrol på jQuery-objektet uden at ændre indholdet af jQuery-objektet. Dette er ofte nyttigt inden for callback, såsom eventhåndterere.

Antag, at vi har en liste, hvor to elementer indeholder underemner:

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

Du kan tilføje en click-håndterer til <ul>-elementet og begrænse koden til kun at udløse, når listeemnet selv, og ikke underemner, bliver klikket på:

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

亲自试一试

Nu, når brugeren klikker på ordet "list" i den første listeemne eller på ethvert ord i den tredje listeemne, sættes den klikkede listeemne til at have en rød baggrund. Men når brugeren klikker på "item 1" i den første listeemne eller på ethvert ord i den anden listeemne, sker der ingen ændring, fordi i disse tilfælde er event målet <strong> er <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 遍历参考手册