[제이쿼리/jQuery] 자식노드, 다음 인접노드, 다음 형제노드 찾기( Child selector, Next Adjacent Selector, Next Siblings Selector )

요약

(" parent > child ") 

자식노드 찾기  Child selector

(" prev + next ") 

다음 인접노드 찾기 Next Adjacent Selector

(" prev + siblings ") 

다음 형제노드 찾기 Next Siblings Selector

자식노드 찾기 ("parent > child")

---

특정노드 하위에있는 자식노드자식중에 노드를 찾고싶다면 (">") 를 사용하면된다.

html

	
		

			
top item
				
item1
				
item2
			
		
		

			
middle item
				
itme1
				
itme2
			
		

js

				$("#top>ul").css("border","1px solid #ff0000");

결과

다음 인접노드 찾기 ("prev + next")

---

prev의 형제노드중 next와 일치하는 인접노드를 모두 찾습니다.

아래 예제에서는 li 의 형제노드중 제일먼저 만나는 input element 에만 css 를 주고싶을때 사용합니다.

html 

	
		

			
top item
				
item1
				
item2
				 
				  
			
			
		
		

			
middle item
				
item1
				
item2
				 
				  
			
			
		

js

				$("li + input").css("border","1px solid #ff0000"); 

결과

다음 형제노드 찾기 ("prev ~ siblings")

---

prev의 형제노드중 silblings 와 일치하는 노드를 모두 찾습니다.

위의 (prev + next) 는 도달범위가 바로 다음에 오는 노드에만 적용되지만

아래 (prev ~ silblings) 는 형제노드 전체에 해당합니다.

아래 예제에서는 li 의 형제노드중  input element 에만 css 를 주고싶을때 사용합니다.

html 

	
		

			
top item
				
item1
				
item2
				 
				  
			
			
		
		

			
middle item
				
item1
				
item2
				 
				  
			
			
		
		  
		 

js

				$("li ~ input").css("border","1px solid #ff0000"); 

결과