1. Description
| jQuery(":nth-child(index/even/odd/equation) : 부모의 자식 Element들 중에서 n번째 자식 Element들을 찾는다. |
| 첫 번째 인덱스는 1번부터 시작한다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식 나타낸다. |
2. Example
#1버튼을 클릭하면 <td>의 2번째 Element를 찾아서 배경색을 변경한다.
#2버튼을 클릭하면 <td>의 두 번째(2번 인덱스), 네 번째(4번 인덱스)의 배경색을 변경한다.
#3버튼을 클릭하면 <td>의 첫 번째(1번 인덱스), 세 번째(3번 인덱스)의 배경색을 변경한다.
#4버튼을 클릭하면 <td>의 첫 번째 인덱스(3 x 0 + 1), 네 번째 인덱스(3 x 1 + 1)의 배경색을 변경한다.
모든 버튼은 클릭할 때마다 스타일이 토글된다.
| child#1-1 | child#1-2 | child#1-3 | child#1-3 |
| child#2-1 | child#2-2 | child#2-3 | child#2-4 |
| child#3-1 | child#3-2 | child#3-3 | child#3-4 |
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/nth-child</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1">
<table border="1">
<tr>
<td>child#1-1</td>
<td>child#1-2</td>
<td>child#1-3</td>
<td>child#1-3</td>
</tr>
<tr>
<td>child#2-1</td>
<td>child#2-2</td>
<td>child#2-3</td>
<td>child#2-4</td>
</tr>
<tr>
<td>child#3-1</td>
<td>child#3-2</td>
<td>child#3-3</td>
<td>child#3-4</td>
</tr>
</table>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-child-2">#1. $("[name='_1q74-example-1'] td:nth-child(2)")</button><br/>
<button name="btn-child-even">#2. $("[name='_1q74-example-1'] td:nth-child(even)")</button><br/>
<button name="btn-child-odd">#3. $("[name='_1q74-example-1'] td:nth-child(odd)")</button><br/>
<button name="btn-child-3n-1">#4. $("[name='_1q74-example-1'] td:nth-child(3n+1)")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var btnContainer = $("[name='_1q74-example-bottom']");
var btnChild2 = btnContainer.find("[name='btn-child-2']");
var btnChildEven = btnContainer.find("[name='btn-child-even']");
var btnChildOdd = btnContainer.find("[name='btn-child-odd']");
var btnChild3n1 = btnContainer.find("[name='btn-child-3n-1']");
var child2 = $("[name='_1q74-example-1'] td:nth-child(2)");
var childEven = $("[name='_1q74-example-1'] td:nth-child(even)");
var childOdd = $("[name='_1q74-example-1'] td:nth-child(odd)");
var child3n1= $("[name='_1q74-example-1'] td:nth-child(3n+1)");
btnChild2.click(function() {
if(!child2.is("[style]")) {
child2.css("background", "#AE5907");
} else {
child2.removeAttr("style");
}
});
btnChildEven.click(function() {
if(!childEven.is("[style]")) {
childEven.css("background", "#07AE3A");
} else {
childEven.removeAttr("style");
}
});
btnChildOdd.click(function() {
if(!childOdd.is("[style]")) {
childOdd.css("background", "#02764C");
} else {
childOdd.removeAttr("style");
}
});
btnChild3n1.click(function() {
if(!child3n1.is("[style]")) {
child3n1.css("background", "#95A8E4");
} else {
child3n1.removeAttr("style");
}
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
</script>
<style>
[name="_1q74-example-root"] {
min-height: 170px;
}
[name="_1q74-example-1"] {
min-height: 140px;
}
[name="_1q74-example-root"] [type="image"]{
width: 100px;
}
[name="_1q74-example-1"] td {
min-width: 100px;
min-height: 30px;
}
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][jquery][selector]nth-child.html
0.00MB
5. See also
pseudo-class, useversal-selector, jquery-extensions
6. Reference
https://api.jquery.com/nth-child-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #48】:nth-last-of-type() Selector (0) | 2023.03.14 |
|---|---|
| 【jQuery/Selector #47】:nth-last-child() Selector (0) | 2023.03.14 |
| 【jQuery/Selector #45】:not() Selector (0) | 2023.03.14 |
| 【jQuery/Selector #44】Next Siblings Selector (“prev ~ siblings”) (0) | 2023.03.13 |
| 【jQuery/Selector #43】Next Adjacent Selector (“prev + next”) (0) | 2023.03.13 |