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

ʵÀý

²éÕÒÿ¸ö¶ÎÂäµÄÏÂÒ»¸öͬ°ûÔªËØ£¬½öÑ¡ÖÐÀàÃûΪ "selected" µÄ¶ÎÂ䣺

$("p").next(".selected").css("background", "yellow");

Ç××ÔÊÔÒ»ÊÔ

¶¨ÒåºÍÓ÷¨

next() »ñµÃÆ¥ÅäÔªËØ¼¯ºÏÖÐÿ¸öÔªËØ½ôÁÚµÄͬ°ûÔªËØ¡£Èç¹ûÌṩѡÔñÆ÷£¬ÔòÈ¡»ØÆ¥Åä¸ÃÑ¡ÔñÆ÷µÄÏÂÒ»¸öͬ°ûÔªËØ¡£

Óï·¨

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

Ïêϸ˵Ã÷

Èç¹û¸ø¶¨Ò»¸ö±íʾ DOM ÔªËØ¼¯ºÏµÄ jQuery ¶ÔÏó£¬.next() ·½·¨ÔÊÐíÎÒÃÇËÑË÷ DOM Ê÷ÖеÄÔªËØ½ô¸úµÄͬ°ûÔªËØ£¬²¢ÓÃÆ¥ÅäÔªËØ¹¹ÔìÐ嵀 jQuery ¶ÔÏó¡£

¸Ã·½·¨½ÓÊÜ¿ÉÑ¡µÄÑ¡ÔñÆ÷±í´ïʽ£¬ÀàÐÍÓëÎÒ´«µÝµ½ $() º¯ÊýÖеÄÏàͬ¡£Èç¹û½ô¸úµÄͬ°ûÔªËØÆ¥Åä¸ÃÑ¡ÔñÆ÷£¬Ôò»áÁôÔÚй¹ÔìµÄ 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').next().css('background-color', 'red');

Ç××ÔÊÔÒ»ÊÔ

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

VUE