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 ±»ÉèÖÃΪºìÉ«±³¾°¡£ÓÉÓÚÎÒÃÇûÓÐÓ¦ÓÃÑ¡ÔñÆ÷±í´ïʽ£¬½ô¸úµÄÕâ¸öÔªËØºÜÃ÷È·µØ±»°üÀ¨Îª¶ÔÏóµÄÒ»²¿·Ö¡£Èç¹ûÎÒÃÇÒѾ­Ó¦ÓÃÁËÑ¡ÔñÆ÷£¬ÔÚ°üº¬Ëü֮ǰ»á¼ì²âÊÇ·ñÆ¥Åä¡£

VUE