jQuery ±éÀú - siblings() ·½·¨
ʵÀý
²éÕÒÿ¸ö p ÔªËØµÄËùÓÐÀàÃûΪ "selected" µÄËùÓÐͬ°ûÔªËØ£º
$("p").siblings(".selected")
¶¨ÒåºÍÓ÷¨
siblings() »ñµÃÆ¥Å伯ºÏÖÐÿ¸öÔªËØµÄͬ°û£¬Í¨¹ýÑ¡ÔñÆ÷½øÐÐɸѡÊÇ¿ÉÑ¡µÄ¡£
Óï·¨
.siblings(selector)
²ÎÊý | ÃèÊö |
---|---|
selector | ×Ö·û´®Öµ£¬°üº¬ÓÃÓÚÆ¥ÅäÔªËØµÄÑ¡ÔñÆ÷±í´ïʽ¡£ |
Ïêϸ˵Ã÷
Èç¹û¸ø¶¨Ò»¸ö±íʾ DOM ÔªËØ¼¯ºÏµÄ jQuery ¶ÔÏó£¬.siblings() ·½·¨ÔÊÐíÎÒÃÇÔÚ 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').siblings()
.css('background-color', 'red');
´Ë´¦µ÷ÓõĽá¹ûÊǽ«ÏîÄ¿ 1¡¢2¡¢4 ºÍ 5 µÄ±³¾°ÉèÖÃΪºìÉ«¡£ ÉèÖÃΪºìÉ«±³¾°¡£ÓÉÓÚÎÒÃÇδӦÓÃÑ¡ÔñÆ÷±í´ïʽ£¬ËùÓÐͬ°ûÔªËØºÜ×ÔÈ»µØ³ÉΪÁ˶ÔÏóµÄÒ»²¿·Ö¡£Èç¹ûÒÑÓ¦ÓÃÑ¡ÔñÆ÷£¬ÔòÖ»»á°üº¬ËĸöÁбíÖÐµÄÆ¥ÅäµÄÏîÄ¿¡£
ÔÊ¼ÔªËØ²»°üº¬ÔÚͬ°ûÔªËØÖУ¬µ±ÎÒÃÇ´òËãÕÒµ½ DOM Ê÷µÄÌØ¶¨²ã¼¶ÉϵÄËùÓÐÔªËØÊ±£¬¼ÇסһµãºÜÖØÒª¡£