선택자(Selector)를 시작으로 내가 추적하고자 하는 태그 알아내기.
태그의 자식(하위 항목)을 가져오는 함수
모든 하위 항목을 일일이 탐색하지 않아도 된다.
<script type="text/javascript">
$(function() {
// <table> 태그의 하위 항목들 중에서 아이디가 textId 인 태그의 값(value)
console.log($("table").find("#textId").val()); // 출력 : 텍스트 값
});
</script>
<body>
<table>
<tbody>
<tr>
<td>
<input type="text" id="textId" value="텍스트 값"/>
</td>
<td>
<input type="text" class="textClass" value="텍스트 값1"/>
<input type="text" class="textClass" value="텍스트 값2"/>
<input type="text" class="textClass" value="텍스트 값3"/>
<input type="text" class="textClass" value="텍스트 값4"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="radio" name="radioName" value="라디오 값1"/>
<label>라디오1</label>
<input type="radio" name="radioName" value="라디오 값2" checked="checked"/>
<label>라디오2</label>
</td>
</tr>
</tbody>
</table>
</body>
태그의 바로 위 레벨의 부모(상위 항목)을 가져오는 함수
parent().html() 을 사용하면 해당 부모 항목의 모든 자식들이 나온다.
<script type="text/javascript">
$(function() {
// <h3> 태그의 상위 항목 <div></div>를 가져와서 백그라운드 색상을 노란색으로 지정
$("h3").parent().css("background-color","yellow");
// 응용) 출력 : 텍스트 값2
console.log($("#textId").parent().next().find(".textClass:eq(1)").val());
});
</script>
<body>
<div><h3>parent</h3></div>
<table>
<tbody>
<tr>
<td>
<input type="text" id="textId" value="텍스트 값"/>
</td>
<td>
<input type="text" class="textClass" value="텍스트 값1"/>
<input type="text" class="textClass" value="텍스트 값2"/>
<input type="text" class="textClass" value="텍스트 값3"/>
<input type="text" class="textClass" value="텍스트 값4"/>
</td>
</tr>
</tbody>
</table>
</body>
태그의 다음 항목을 가져오는 함수
위치 기준으로 다음 항목을 가져온다. (input tag 가 아니 여도 된다)
같은 레벨에 존재하는 다음 항목을 가져온다.
<script type="text/javascript">
$(function() {
// class 가 textClass 인 항목 중에서 3번째 항목의 다음 항목 값(value)
console.log($(".textClass:eq(2)").next().val()); // 출력 : 텍스트 값4
});
</script>
<body>
<table>
<tbody>
<tr>
<td>
<input type="text" id="textId" value="텍스트 값"/>
</td>
<td>
<input type="text" class="textClass" value="텍스트 값1"/>
<input type="text" class="textClass" value="텍스트 값2"/>
<input type="text" class="textClass" value="텍스트 값3"/>
<input type="text" class="textClass" value="텍스트 값4"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="radio" name="radioName" value="라디오 값1"/>
<label>라디오1</label>
<input type="radio" name="radioName" value="라디오 값2" checked="checked"/>
<label>라디오2</label>
</td>
</tr>
</tbody>
</table>
</body>
태그의 이전 항목을 가져오는 함수
위치 기준으로 이전 항목을 가져온다. (input tag 가 아니 여도 된다)
같은 레벨에 존재하는 이전 항목을 가져온다.
<script type="text/javascript">
$(function() {
// class 가 textClass 인 항목 중에서 3번째 항목의 이전 항목 값(value)
console.log($(".textClass:eq(2)").prev().val()); // 출력 : 텍스트 값2
});
</script>
<body>
<table>
<tbody>
<tr>
<td>
<input type="text" id="textId" value="텍스트 값"/>
</td>
<td>
<input type="text" class="textClass" value="텍스트 값1"/>
<input type="text" class="textClass" value="텍스트 값2"/>
<input type="text" class="textClass" value="텍스트 값3"/>
<input type="text" class="textClass" value="텍스트 값4"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="radio" name="radioName" value="라디오 값1"/>
<label>라디오1</label>
<input type="radio" name="radioName" value="라디오 값2" checked="checked"/>
<label>라디오2</label>
</td>
</tr>
</tbody>
</table>
</body>