:nth-child() 는 자식 요소 집합에서 선택한 색인에 위치한 자식을 찾는 요소입니다.
원문 링크 
http://api.jquery.com/nth-child-selector/
- jQuery(':nth-child(index/even/odd/equation)')
- index 1이 초기값이며 색인에 맞는 자식 요소를 찾는다. even, odd, equation 이라는 문자열도 사용할 수 있음.
- (예. :nth-child(event), :nth-child(4n))
:nth-child(n) 선택자는 CSS 사용법에서 파생된 jQuery의 문법이기 때문에, n 은 "1부터 시작"한다. 그러나 jQuery의 어떤 함수들은 JavaScript의 "0이 시작"인 인덱스 구조를 따른다. 단독으로 사용된 <ul> 가 두 개의 <li> 를 가지고 있다고 가정했을 때, $('li:nth-child(1)') 은 첫번째 <li>를 의미하고 $('li:eq(1)')은 두번째 <li>를 의미한다.
이 선택자의 인덱스 시작값은 1 이라는 얘기입니다. 그 아래 덭붙여진 내용이 더 있는데 참고하시기 바랍니다. (해석 못해서 그런거 아닙니다. 문장이 길어서 그런것도 아닙니다. 하하하;;;)
예 제
ul 에 속한 2번째 li 를 찾아서 ' - 2nd' 텍스트를 추가한다.
<!DOCTYPE html>
<html>
<head>
<style>
div { float:left; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div><ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul></div>
<div><ul>
<li>Sam</li>
</ul></div>
<div><ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>
</body>
</html>
미리보기
예 제
각 상황에 맞게 tr 를 선택해 준다. 각 버튼들을 눌러 확인해 보자.
<!DOCTYPE html>
<html>
<head>
<style>
button { display:block; font-size:12px; width:100px; }
div { float:left; margin:10px; font-size:10px;
border:1px solid black; }
span { color:blue; font-size:18px; }
#inner { color:red; }
td { width:50px; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div>
<button>:nth-child(even)</button>
<button>:nth-child(odd)</button>
<button>:nth-child(3n)</button>
<button>:nth-child(2)</button>
</div>
<div>
<button>:nth-child(3n+1)</button>
<button>:nth-child(3n+2)</button>
<button>:even</button>
<button>:odd</button>
</div>
<div><table>
<tr><td>John</td></tr>
<tr><td>Karl</td></tr>
<tr><td>Brandon</td></tr>
<tr><td>Benjamin</td></tr>
</table></div>
<div><table>
<tr><td>Sam</td></tr>
</table></div>
<div><table>
<tr><td>Glen</td></tr>
<tr><td>Tane</td></tr>
<tr><td>Ralph</td></tr>
<tr><td>David</td></tr>
<tr><td>Mike</td></tr>
<tr><td>Dan</td></tr>
</table></div>
<span>
tr<span id="inner"></span>
</span>
<script>
$("button").click(function () {
var str = $(this).text();
$("tr").css("background", "white");
$("tr" + str).css("background", "#ff0000");
$("#inner").text(str);
});
</script>
</body>
</html>미리보기
잘 사용하면 무지 유용하게 사용할 수 있을 것 같습니다. 연구하셔서 저도 좀 알려주세요. ^^
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - type=password 인 것 찾기 : password (2) | 2011.02.18 |
|---|---|
| jQuery API 정복 - 다른 요소를 포함한 요소 찾기 : parent (2) | 2011.02.18 |
| jQuery API 정복 - 유일한 자식 요소 찾기 : only-child (8) | 2011.02.17 |
| jQuery API 정복 - 홀수번째 요소 찾기 : odd (2) | 2011.02.17 |
| jQuery API 정복 - ~이 아닌 요소 선택하기 : not (3) | 2011.02.16 |
| jQuery API 정복 - 다음 형제 요소 찾기 : next ~ siblings (6) | 2011.02.15 |
| jQuery API 정복 - 다음 요소 선택하기 : prev + next (5) | 2011.02.14 |
| jQuery API 정복 - 한번에 여러 요소 선택하기 : Multiple Selector (2) | 2011.02.14 |