jQuery ±éÀú - is() ·½·¨

ʵÀý

·µ»Ø false£¬ÒòΪ input ÔªËØµÄ¸¸ÔªËØÊÇ p ÔªËØ£º

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

Ç××ÔÊÔÒ»ÊÔ

¶¨ÒåºÍÓ÷¨

is() ¸ù¾ÝÑ¡ÔñÆ÷¡¢ÔªËØ»ò jQuery ¶ÔÏóÀ´¼ì²âÆ¥ÅäÔªËØ¼¯ºÏ£¬Èç¹ûÕâÐ©ÔªËØÖÐÖÁÉÙÓÐÒ»¸öÔªËØÆ¥Å䏸¶¨µÄ²ÎÊý£¬Ôò·µ»Ø true¡£

Óï·¨

.is(selector)
²ÎÊý ÃèÊö
selector ×Ö·û´®Öµ£¬°üº¬Æ¥ÅäÔªËØµÄÑ¡ÔñÆ÷±í´ïʽ¡£

Ïêϸ˵Ã÷

ÓëÆäËûɸѡ·½·¨²»Í¬£¬.is() ²»´´½¨Ð嵀 jQuery ¶ÔÏó¡£Ïà·´£¬ËüÔÊÐíÎÒÃÇÔÚ²»ÐÞ¸Ä jQuery ¶ÔÏóÄÚÈݵÄÇé¿öÏÂ¶ÔÆä½øÐмì²â¡£ÕâÔÚ callback ÄÚ²¿Í¨³£±È½ÏÓÐÓ㬱ÈÈçʼþ´¦Àí³ÌÐò¡£

¼ÙÉèÎÒÃÇÓÐÒ»¸öÁÐ±í£¬ÆäÖÐÁ½¸öÏîÄ¿°üº¬×ÓÔªËØ£º

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

Äú¿ÉÒÔÏò <ul> ÔªËØÌí¼Ó click ´¦Àí³ÌÐò£¬È»ºó°Ñ´úÂëÏÞÖÆÎªÖ»Óе±ÁбíÏî±¾Éí£¬¶ø·Ç×ÓÔªËØ£¬±»µã»÷ʱ²Å½øÐд¥·¢£º

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

Ç××ÔÊÔÒ»ÊÔ

ÏÖÔÚ£¬µ±Óû§µã»÷µÄÊǵÚÒ»¸öÁбíÏîÖеĵ¥´Ê "list" »òµÚÈý¸öÁбíÏîÖеÄÈκε¥´Êʱ£¬±»µã»÷µÄÁбíÏî»á±»ÉèÖÃΪºìÉ«±³¾°¡£²»¹ý£¬µ±Óû§µã»÷µÚÒ»¸öÁбíÏîÖÐµÄ item 1 »òµÚ¶þ¸öÁбíÏîÖеÄÈκε¥´Êʱ£¬¶¼²»»áÓÐÈκα仯£¬ÕâÊÇÒòΪÕâÉÏÃæµÄÇé¿öÖУ¬Ê¼þµÄÄ¿±ê·Ö±ðÊÇ <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");
  }
});

Ç××ÔÊÔÒ»ÊÔ

VUE