이번에는 지정 엘리먼트로부터 찾고자 하는 태그를 찾기위하여 Traversing에 대하여 알아보도록 하겠습니다.
"왜 쓰는가 그냥 찾고자 하는 엘리먼트에 id 값이나 class 값 또는 셀렉터를 이용하여 사용하면 되지 않느냐" 라고 의아해하시는 분들이 계실겁니다.
하지만 프로젝트를 진행하시다 보면 Traversing을 이용하여 작성 할 경우가 상당히 많습니다.
몇가지만을 예로들어서 포스팅하도록 하겠습니다.
$("selector").eq("index")
지정된 인덱스로 일치하는 엘리먼트들의 집합을 줄인다
$("selector").find("childSelector")
셀렉터에의해 필터링된 객체 또는 엘리먼트와 일치하는 요소의 자식엘리먼트 얻기
$("selector").parent()
셀렉터에의해 필터링된 영역으로부터의 부모노드를 가져오기
$("selector").prev()
셀렉터에의해 필터링된 영역에 있는 엘리먼트의 이전형제노드 가져오기
$("selector").next()
셀렉터에의해 필터링된 영역에 있는 엘리먼트의 다음형제노드 가져오기
상단 샘플구조는 다음과 같습니다.
상단 이미지들을 코드로 다시 작성하여 하나씩 설명해보도록 하겠습니다.
Body태그내 HTML 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table> <tr> <td> 첫번째 tr의 첫번째 td </td> <td> 첫번째 tr의 두번쩨 td </td> </tr> <tr> <td> 두번째 tr의 첫번쩨 td </td> <td> 두번째 tr의 두번쩨 td </td> </tr></table> |
Traversing별 스크립트 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(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 태그
코드를 응용하여 다른 샘플을 만들어서 Traversing에 대하여 습득을 해보도록 합니다.
by 개발로짜
'웹개발강좌 > jQuery' 카테고리의 다른 글
| jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자 (1) | 2015.01.15 |
|---|---|
| jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자 (2) | 2014.12.02 |
| jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1) | 2014.11.27 |
| jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4) | 2014.11.15 |
| jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |