¾È±Ô °øºÎ¹æ

Javascript & JQuery & CSS > siblings() - ÇüÁ¦ °´Ã¼¸¦ ã¾Æ¶ó...

µî·ÏÀÏ : 2017-07-04 14:30 Á¶È¸¼ö : 53,231

siblings() °´Ã¼´Â item°´Ã¼¿Í µ¿ÀÏÇÑ À§Ä¡¿¡ ÀÖ´Â ¸ðµç °´Ã¼ (ÀÚ½ÅÀ» Á¦¿ÜÇÑ ÇüÁ¦¿ä¼Ò) ¸¦ °Ë»öÇÒ ¼ö ÀÖ´Â ¸Þ¼Òµå ÀÔ´Ï´Ù.
				<ul>
					<li>list item 1 </li>
					<li>list item 2 </li>           
					<li>list item 3 </li>
					<li>list item 4 </li>
					<li>list item 5 </li>
				</ul>
				
				$(document).ready(function() {
					$("li").each(function () {
						$(this).click(function () {
							$(this).addClass("selected");
							$(this).siblings().removeClass("selected");
						});
					});
				});
ul ÅÂ±× ¹Ø¿¡ li ű×ÀÇ ÇüÁ¦µéÀÌ 5°³°¡ ÀÖ½À´Ï´Ù.
$(this).click ÀÌ °´Ã¼µéÀ» Ŭ¸¯ÇßÀ» °æ¿ì,

$(this).addClass("selected");
$(this).siblings().removeClass("selected");

ÀÌ µÎÁÙÀÇ ÇÁ·Î±×·¥ÀÌ ½ÇÇàÀÌ µË´Ï´Ù. $(this).siblings() ÇÔ¼ö°¡ ½ÇÇàµÇ´Âµ¥¿ä.

¿©±â¿¡¼­ $(this) °´Ã¼°¡ li ű×À̱⠶§¹®¿¡ Ŭ¸¯ÇÑ this ű׸¦ Á¦¿ÜÇÑ ³ª¸ÓÁö °´Ã¼´Â removeClass("selected"); ¸í·ÉÀÌ ½ÇÇàµÇ¾î style ÀÌ ¾ø¾îÁö°Ô µË´Ï´Ù.
 
				<ul>
					<div id="orange">¿À·»Áö</div>
					<div class="p">¹Ù³ª³ª</div>
					<div class="p">ÆÄÀξÖÇÃ</div>
					<div class="p">»ç°ú</div>
					<div class="paa">Á¦ÁÖ°¨±Ö </div>
				</ul>
À§ ¼Ò½º¿Í °°Àº űװ¡ Á¸ÀçÇÕ´Ï´Ù.
orange id ¸¦ ±âÁØÀ¸·Î ÇüÁ¦ ű×Áß class °¡ '.P' ÀΰÍÀ» ã°íÀÚ ÇÕ´Ï´Ù.
ÀÌ·± °æ¿ì
$("#orange").siblings(".p").css("color","#ff0000");

À§ ¼Ò½º¿Í °°Àº Çü½ÄÀ¸·Î ±¸Çö ÇÒ ¼ö ÀÖ½À´Ï´Ù.
ÇüÁ¦ ¿ä¼ÒÁß siblings(".p") ÅëÇØ class="p" ÀÎ °´Ã¼¸¦ °Ë»ö ÇÒ ¼ö ÀÖ½À´Ï´Ù. Á¦ÁÖ°¨±Ö °ú ¿À·»Áö ű״ Á¦¿Ü µË´Ï´Ù.......
¡Ø Ȥ½Ã µµ¿òÀÌ µÇ¼Ì´Ù¸é ´ñ±Û¿¡ ÇѸ¶µð ³²°ÜÁÖ¼¼¿ä!
ÀÛ¼ºÀÚ   ºñ¹Ð¹øÈ£
ÀÚµ¿±Û ¹æÁö     (ÀÚµ¿±Û ¹æÁö ±â´ÉÀÔ´Ï´Ù.)
³»¿ë   ´ñ±Û´Þ±â 
À̸ÞÀÏ ¹®ÀÇ : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.