(Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 > jquery

출처 : http://hellogk.tistory.com/113

지정 엘리먼트로부터 찾고자 하는 태그를 찾기위하여 Traversing에 대하여 알아보도록 하겠습니다.

"왜 쓰는가 그냥 찾고자 하는 엘리먼트에 id 값이나 class 값 또는 셀렉터를 이용하여 사용하면 되지 않느냐" 라고 의아해하시는 분들이 계실겁니다.

하지만 프로젝트를 진행하시다 보면 Traversing을 이용하여 작성 할 경우가 상당히 많습니다.

몇가지만을 예로들어서 포스팅하도록 하겠습니다.

$("selector").eq("index")

지정된 인덱스로 일치하는 엘리먼트들의 집합을 줄인다

$("selector").find("childSelector")

셀렉터에의해 필터링된 객체 또는 엘리먼트와 일치하는 요소의 자식엘리먼트 얻기

$("selector").parent()

셀렉터에의해 필터링된 영역으로부터의 부모노드를 가져오기

$("selector").prev()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 이전형제노드 가져오기

$("selector").next()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 다음형제노드 가져오기

상단 샘플구조는 다음과 같습니다.

상단 이미지들을 코드로 다시 작성하여 하나씩 설명해보도록 하겠습니다.

Body태그내 HTML 코드

<table>
	<tr>
		<td>
			첫번째 tr의 첫번째 td
		</td>
		<td>
			첫번째 tr의 두번쩨 td
		</td>
	</tr>
	<tr>
		<td>
			두번째 tr의 첫번쩨 td
		</td>
		<td>
			두번째 tr의 두번쩨 td
		</td>
	</tr>
</table>

Traversing별 스크립트 코드

$(function(){
	//eq() traversing
	alert($("tr").eq(0).html());
	alert($("tr").eq(1).html());
	
	//find() traversing
	alert($("tr").eq(0).find("td").eq(0).html());
	alert($("tr").eq(1).find("td").eq(0).html());
	
	//parent() traversing(둘다 같은 부모를 찾는 코드이므로 결과값 동일)
	alert($("tr").eq(0).parent().html());
	alert($("tr").eq(1).parent().html());
	
	//prev() traversing
	alert($("tr").eq(0).find("td").eq(1).prev().html());
	alert($("tr").eq(1).find("td").eq(1).prev().html());
	
	//next() traversing
	alert($("tr").eq(0).find("td").eq(0).next().html());
	alert($("tr").eq(1).find("td").eq(0).next().html());
})

위코드에 대한 작성이 완료되었다면 실행을 해보도록 하겠습니다.

$("selector").eq(index).html()

해석 : 선택된 엘리먼트의 index번째에 있는 HTML 태그

$("selector").eq(index).find("childselector").eq(childindex).html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째에 있는 HTML 태그

$("selector").eq(index).parent().html()

해석 : 선택된 엘리먼트의 index번째의 노드를 감싸는 부모노드내에 존재하는 HTML 태그

$("selector").eq(index).find("childselector").eq(childindex).prev().html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 이전 형제노드의 html 태그

$("selector").eq(index).find("childselector").eq(childindex).next().html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 다음 형제노드의 html 태그