jQuery ±éÀú - find() ·½·¨
ʵÀý
ËÑË÷ËùÓжÎÂäÖеĺó´ú span ÔªËØ£¬²¢½«ÆäÑÕÉ«ÉèÖÃΪºìÉ«£º
$("p").find("span").css('color','red');
¶¨ÒåºÍÓ÷¨
find() ·½·¨»ñµÃµ±Ç°ÔªËؼ¯ºÏÖÐÿ¸öÔªËØµÄºó´ú£¬Í¨¹ýÑ¡ÔñÆ÷¡¢jQuery ¶ÔÏó»òÔªËØÀ´É¸Ñ¡¡£
Óï·¨
.find(selector)
| ²ÎÊý | ÃèÊö |
|---|---|
| selector | ×Ö·û´®Öµ£¬°üº¬¹©Æ¥Åäµ±Ç°ÔªËØ¼¯ºÏµÄÑ¡ÔñÆ÷±í´ïʽ¡£ |
Ïêϸ˵Ã÷
Èç¹û¸ø¶¨Ò»¸ö±íʾ DOM ÔªËØ¼¯ºÏµÄ jQuery ¶ÔÏó£¬.find() ·½·¨ÔÊÐíÎÒÃÇÔÚ DOM Ê÷ÖÐËÑË÷ÕâÐ©ÔªËØµÄºó´ú£¬²¢ÓÃÆ¥ÅäÔªËØÀ´¹¹ÔìÒ»¸öÐ嵀 jQuery ¶ÔÏó¡£.find() Óë .children() ·½·¨ÀàËÆ£¬²»Í¬µÄÊǺóÕß½öÑØ×Å DOM Ê÷ÏòϱéÀúµ¥Ò»²ã¼¶¡£
.find() ·½·¨µÚÒ»¸öÃ÷ÏÔÌØÕ÷ÊÇ£¬Æä½ÓÊܵÄÑ¡ÔñÆ÷±í´ïʽÓëÎÒÃÇÏò $() º¯Êý´«µÝµÄ±í´ïʽµÄÀàÐÍÏàͬ¡£½«Í¨¹ý²âÊÔÕâÐ©ÔªËØÊÇ·ñÆ¥Åä¸Ã±í´ïʽÀ´¶ÔÔªËØ½øÐйýÂË¡£
Çë˼¿¼ÏÂÃæÕâ¸ö¼òµ¥µÄǶÌ×ÁÐ±í£º
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
ÎÒÃǽ«´ÓÁбí II ¿ªÊ¼À´²éÕÒÆäÖеÄÁбíÏ
$('li.item-ii').find('li').css('background-color', 'red');
Õâ´Îµ÷ÑеĽá¹ûÊÇ£¬ÏîÄ¿ A¡¢B¡¢1¡¢2¡¢3 ÒÔ¼° C ¾ù±»ÉèÖÃÁ˺ìÉ«±³¾°¡£¼´Ê¹ÏîÄ¿ II Æ¥ÅäÑ¡ÔñÆ÷±í´ïʽ£¬ËüÒ²²»»á±»°üº¬ÔÚ½á¹ûÖУ»Ö»»á¶Ôºó´ú½øÐÐÆ¥Åä¡£
ÓëÆäËûµÄÊ÷±éÀú·½·¨²»Í¬£¬Ñ¡ÔñÆ÷±í´ïʽ¶ÔÓÚ .find() ÊDZØÐèµÄ²ÎÊý¡£Èç¹ûÎÒÃÇÐèҪʵÏÖ¶ÔËùÓкó´úÔªËØµÄÈ¡»Ø£¬¿ÉÒÔ´«µÝͨÅäÑ¡ÔñÆ÷ '*'¡£
Ñ¡ÔñÆ÷ context ÊÇÓÉ .find() ·½·¨ÊµÏֵģ»Òò´Ë£¬$('li.item-ii').find('li') µÈ¼ÛÓÚ $('li', 'li.item-ii')¡£
¶ÔÓÚ jQuery 1.6£¬ÎÒÃÇ»¹¿ÉÒÔʹÓøø¶¨µÄ jQuery ¼¯ºÏ»òÔªËØÀ´½øÐÐɸѡ¡£»¹ÊÇÉÏÃæµÄǶÌ×ÁÐ±í£¬ÎÒÃÇÊ×ÏÈÕâÑùд£º
var $allListElements = $('li');
È»ºó½«Õâ¸ö jQuery ¶ÔÏ󴫵ݸø find ·½·¨£º
$('li.item-ii').find( $allListElements );
ÉÏÃæµÄ´úÂë»á·µ»ØÒ»¸ö jQuery ¼¯ºÏ£¬ÆäÖаüº¬ÊôÓÚÁбí II ºó´úµÄÁбíÔªËØ¡£
ÀàËÆµØ£¬Ò²¿ÉÒÔ´«µÝÒ»¸öÔªËØ£º
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
Õâ´Îµ÷ÓõĽá¹ûÊÇÏîÄ¿ 1 ±»ÉèÖÃΪºìÉ«±³¾°¡£