jQuery pagbubunyag - .is() method

jQuery Traversal Reference Manual

Mga halimbawa

Ibalik ang false, dahil ang magulang ng input element ay ang p element:

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

Try it yourself

Paglilinang at paggamit

Ang .is() ay tumutuklas sa mga naabot na element collection ayon sa selector, element o jQuery object, at ibabalik ang true kapag kahit anong element na nababanggit ay tumutugma sa ibinigay na parametro.

Gramatika

.is(selector)
Parametro Paglalarawan
selector String value, naglalaman ng ekspresyong selector ng naabot na element.

Detalyadong paglalarawan

Hindi katulad ng ibang mga paraan ng pagbubunyag, hindi gumagawa ng bagong jQuery object ang .is(). Sa halip, pinahihintulutan nito na tuklasin ang jQuery object na walang pagbabago sa nilalaman nito. Ito ay malinaw na kapaki-pakinabang sa loob ng callback, tulad ng event handler.

Ipagpalagay na mayroon kaming list na may dalawang item na may mga anak:

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

Maaari mong magdagdag ng click handler sa <ul> element at limitahan ang code para lumutang kapag ang na-click na item ng list ay ang mismong ito, hindi ang mga anak nito:

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

Try it yourself

Ngayon, kapag tinatanggap ng gumagamit ang unang item ng list na lirin 'list' o anumang lirin ng ikatlong item ng list, ang na-click na item ng list ay magiging kulay puti na background. Gayunpaman, kapag tinatanggap ng gumagamit ang 'item 1' ng unang item ng list o anumang lirin ng ikalawang item ng list, walang pagbabago, dahil sa ganitong sitwasyon, ang target ng kaganapan ay <strong> ay <span>.

Please note that for selector expression strings with positional selectors, such as :first, :gt(), or :even, the positional filtering is applied to the jQuery object passed to .is(), not to the document. Therefore, for the above HTML, expressions like $("li:first").is("li:last") return true, but $("li:first-child").is("li:last-child") returns false.

Using a function

The second usage of this method is to evaluate an expression that is based on a function rather than a selector. For each element, if the function returns true, .is() also returns true. For example, here is a slightly more complex HTML snippet:

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

You can add a click handler to each <li> to calculate the number of <strong> elements inside the clicked <li>:

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

Try it yourself

jQuery Traversal Reference Manual