jQuery-selailu - is()-menetelmä

jQuery 遍历参考手册

Esimerkki

Palauttaa false, koska input-elementin emo on p-elementti:

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

亲自试一试

Määritelmä ja käyttö

is() tarkistaa valitsimen, elementin tai jQuery-objektin vastaavuuden elementtien joukkoon, ja jos vähintään yksi näistä elementeistä vastaa annettua parametria, palauttaa true.

Syntaksi

.is(valitsin)
Parametrit Kuvaus
valitsin Merkkijonoarvo, joka sisältää vastaanotetun elementin valitsimen ilmaiselman.

Yksityiskohtainen selitys

Eri kuin muut suodatusmenetelmät, .is() ei luo uutta jQuery-objektia. Sen sijaan se mahdollistaa meidän tarkistaa jQuery-objektia ilman, että muutetaan sen sisältöä. Tämä on yleensä hyödyllistä callback-ohjelmointiympäristössä, kuten tapahtumankäsittelijöissä.

Oletetaan, että meillä on luettelo, jossa kaksi kohtaa sisältää alisijat:

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

Voit lisätä click-käsittelijän <ul>-elementtiin ja rajoittaa koodin niin, että se käynnistyy vain silloin, kun luettelo kohta itse, ei sen alisijat, on napsautettu:

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

亲自试一试

Nyt, kun käyttäjä napsauttaa ensimmäisen luettelon kohteen sanaa "list" tai kolmannen luettelon kohteen minkä tahansa sanaa, napsautettu luettelo kohta asetetaan punaiseen taustaväriin. Kuitenkin, kun käyttäjä napsauttaa ensimmäisen luettelon kohteen sanaa item 1 tai toisen luettelon kohteen minkä tahansa sanaa, ei tapahdu minkäänlaista muutosta, koska tässä tilanteessa tapahtuman kohde on <strong> on <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 遍历参考手册