jQuery 컨텍스트를 기반으로 DOM탐색하기(Dom 탐색메서드)
2010.11.14 00:21
:eq() 사용자 정의 셀렉터로, 원하는 구성요소뒤에 붙이면, 해당 요소의 집합에서 가로안의 배열번호에 해당하는 결과값을 가져올 수 있다.
jQuery('li:eq(1)').next() // 세번째 <li> 조회
jQuery('li:eq(1)').prev() // 첫번째 <li> 조회
jQuery('li:eq(1)').parent() // <ul> 조회
jQuery('li:eq(1)').parent().children() // 모든 <li> 조회
jQuery('li:eq(1)').nextAll() // 두번째 <li> 이후에 오는 모든 <li> 조회
jQuery('li:eq(1)').prevAll() // 두번째 <li> 이전에 오는 모든 <li> 조회
-------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/XHTML11/DTD/XHTML11-Transitional.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
<ul>
</div>
<script type="text/JavaScript"
src="/jquery/jquery-1.4.3.min.js">
</script>
<script type="text/JavaScript">
//인덱스로 <li> 집합에서 두번째 요소를 선택한다. 인덱스는 0부터 시작한다.
alert(jQuery('li:eq(1)').text());
//div요소 내 p요소에만 적용하려면..
//jQuery('div').find('p').css('border','1px solid #993300');
</script>
</body>
</html>
jQuery('li:eq(1)').next() // 세번째 <li> 조회
jQuery('li:eq(1)').prev() // 첫번째 <li> 조회
jQuery('li:eq(1)').parent() // <ul> 조회
jQuery('li:eq(1)').parent().children() // 모든 <li> 조회
jQuery('li:eq(1)').nextAll() // 두번째 <li> 이후에 오는 모든 <li> 조회
jQuery('li:eq(1)').prevAll() // 두번째 <li> 이전에 오는 모든 <li> 조회
-------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/XHTML11/DTD/XHTML11-Transitional.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
<ul>
</div>
<script type="text/JavaScript"
src="/jquery/jquery-1.4.3.min.js">
</script>
<script type="text/JavaScript">
//인덱스로 <li> 집합에서 두번째 요소를 선택한다. 인덱스는 0부터 시작한다.
alert(jQuery('li:eq(1)').text());
//div요소 내 p요소에만 적용하려면..
//jQuery('div').find('p').css('border','1px solid #993300');
</script>
</body>
</html>
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 10 | javascript로 target="_blank" 같은 형태로 새창띄우기 | jurohan | 2014.12.08 | 1654 |
| 9 | 자바스크립트로 키보드 입력받기 | jurohan | 2014.02.21 | 2453 |
| 8 | 함수 반복 실행 방지 기능 | jurohan | 2014.02.20 | 2289 |
| 7 | javascript 선언한 변수가 없을 경우, 재 선언하는 방법 | jurohan | 2014.01.29 | 408 |
| 6 | jquery를 활용한 비동기통신 예제 | jurohan | 2014.01.07 | 459 |
| 5 | 브라우저 창 가로,세로 크기에 따른 레이아웃 변경 | juro | 2013.10.21 | 2440 |
| 4 | jquery 휠 동작 관련코드 | juro | 2012.10.30 | 3202 |
| » | 컨텍스트를 기반으로 DOM탐색하기(Dom 탐색메서드) | juro | 2010.11.14 | 466 |
| 2 | 스크립트는 </body>바로 앞쪽에 위치시키는 습관 | juro | 2010.11.12 | 419 |
| 1 | jQuery 튜터리얼> [4] | juro | 2010.10.20 | 553 |
