jQuery ±éÀú - nextAll() ·½·¨
ʵÀý
²éÕÒµÚÒ»¸ö div Ö®ºóµÄËùÓÐÀàÃû£¬²¢ÎªËûÃÇÌí¼ÓÀàÃû£º
$("div:first").nextAll()
.addClass("after");
¶¨ÒåºÍÓ÷¨
nextAll() »ñµÃÆ¥ÅäÔªËØ¼¯ºÏÖÐÿ¸öÔªËØµÄËùÓиúËæµÄͬ°ûÔªËØ£¬ÓÉÑ¡ÔñÆ÷ɸѡÊÇ¿ÉÑ¡µÄ¡£
Óï·¨
.nextAll(selector)
²ÎÊý | ÃèÊö |
---|---|
selector | ×Ö·û´®Öµ£¬°üº¬ÓÃÓÚÆ¥ÅäÔªËØµÄÑ¡ÔñÆ÷±í´ïʽ¡£ |
Ïêϸ˵Ã÷
Èç¹û¸ø¶¨Ò»¸ö±íʾ DOM ÔªËØ¼¯ºÏµÄ jQuery ¶ÔÏó£¬.nextAll() ·½·¨ÔÊÐíÎÒÃÇËÑË÷ DOM Ê÷ÖеÄÔªËØ¸úËæµÄͬ°ûÔªËØ£¬²¢ÓÃÆ¥ÅäÔªËØ¹¹ÔìÐ嵀 jQuery ¶ÔÏó¡£
¸Ã·½·¨½ÓÊÜ¿ÉÑ¡µÄÑ¡ÔñÆ÷±í´ïʽ£¬ÀàÐÍÓëÎÒ´«µÝµ½ $() º¯ÊýÖеÄÏàͬ¡£Èç¹ûÓ¦ÓÃÑ¡ÔñÆ÷£¬Ôò½«Í¨¹ý¼ì²âÔªËØÊÇ·ñÆ¥ÅäÀ´¶ÔËüÃǽøÐÐɸѡ¡£
Çë˼¿¼ÏÂÃæÕâ¸ö´øÓмòµ¥ÁбíµÄÒ³Ãæ£º
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
Èç¹ûÎÒÃÇ´ÓÏîÄ¿Èý¿ªÊ¼£¬ÄÇôÎÒÃÇÄܹ»ÕÒµ½Æäºó³öÏÖµÄÔªËØ£º
$('li.third-item').nextAll().css('background-color', 'red');
Õâ´Îµ÷ÓõĽá¹ûÊÇ£¬ÏîÄ¿ 4 ºÍ 5 ±»ÉèÖÃΪºìÉ«±³¾°¡£ÓÉÓÚÎÒÃÇûÓÐÓ¦ÓÃÑ¡ÔñÆ÷±í´ïʽ£¬½ô¸úµÄÕâ¸öÔªËØºÜÃ÷È·µØ±»°üÀ¨Îª¶ÔÏóµÄÒ»²¿·Ö¡£Èç¹ûÎÒÃÇÒѾӦÓÃÁËÑ¡ÔñÆ÷£¬ÔÚ°üº¬Ëü֮ǰ»á¼ì²âÊÇ·ñÆ¥Åä¡£