[JQuery] nth-child

 

이번 시간에는 nth-child를 사용하여 자식 요소를 찾는 방법을 알아보도록 하겠습니다.

 

자식 요소란, 부모가 있으면 그 아래 포함되어 있는 요소를 뜻합니다.

 

1. 자식 요소

 

아래와 같이 테이블이 있습니다.

table 기준으로 자식 요소는 tr 이 되고, tr 기준으로 td가 자식 요소가 됩니다.

 

<table>
    <tr><td>No.1</td></tr>
    <tr><td>No.2</td></tr>
    <tr><td>No.3</td></tr>
    <tr><td>No.4</td></tr>
</table>

 

자식 요소에 대해서 알았으니, 어떤 경우 사용되는지 알아보도록 하겠습니다.

위와 같이 표를 만들었습니다.

 

No.1
No.2
No.3
No.4

 

표를 예쁘게 표시하기 위해서 홀수 줄에 배경색을 넣고 싶습니다.

간단하게 <tr> 태그 안에 <tr bgcolor="#CCCCCC"> 라고 넣어도 됩니다.

 

No.1
No.2
No.3
No.4

 

하지만, 가로 줄이 늘어나거나 지울 경우, 배경을 넣은 줄이 섞이게 됩니다.

 

No.1
No.3
No.4
No.5

 

이렇게 하나하나 스타일을 정하게 되면 번거로운 경우가 있습니다.

이런 경우에 자식 요소를 찾아주는 nth-child를 사용하면 편리하게 사용할 수 있습니다.

 

 

2. nth-child

 

html 소스를 조금 자세히 적어보았습니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<table>
    <tr><td>No.1</td></tr>
    <tr><td>No.2</td></tr>
    <tr><td>No.3</td></tr>
    <tr><td>No.4</td></tr>
</table>
</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

이제 nth-child를 사용해서 원하는 위치의 가로 줄에 배경색을 넣어보도록 하겠습니다.

 

사용방법은 지난 시간에 배운 ID, class, element 뒤에 :nth-child(번호) 라고 입력해주면 됩니다.

table 안, 수많은 tr 중에 첫 번째 요소를 선택해서 배경색을 넣어보도록 하겠습니다.

 

스크립트 안에 아래와 같이 :nth-child(1)을 사용해서 넣어줍니다.

 

$(function() {
     // 스크립트를 넣을 부분
     $("tr:nth-child(1)").css("background", "#00CCFF");
});

 

그럼 아래와 같이 1번째 줄에 배경색이 들어갔습니다.

 

No.1
No.2
No.3
No.4

 

nth-child(1) 대신 다른 숫자를 입력하면 그 번호에 해당되는 가로 줄의 색이 변경됩니다.

 

 

3. nth-child 여러줄

 

위에선 번호에 해당되는 한 개의 가로줄 색을 변경했지만, 홀수, 짝수, 또는 4번에 한번씩과 같이 특정 조건에서 변경하는 방법을 알아보도록 하겠습니다.

 

홀수 가로 줄만 표시하는 경우, odd를 사용하면 됩니다.
그러면 1, 3, 5, 7과 같이 홀수 번째만 적용이 됩니다.

 

$(function() {
     // 스크립트를 넣을 부분
     $("tr:nth-child(odd)").css("background", "#00CCFF");
});

 

No.1
No.2
No.3
No.4

 

 

짝수 줄만 표시하는 경우, even를 사용하면 됩니다.
그러면 2, 4, 6, 8과 같이 짝수 번째만 적용이 됩니다.

 

$(function() {
     // 스크립트를 넣을 부분
     $("tr:nth-child(even)").css("background", "#00CCFF");
});

 

No.1
No.2
No.3
No.4

 

 

그리고 특정 조건으로 하는 경우에는 n을 입력해서 사용합니다.

예를 들어 3줄마다 배경을 넣고 싶다고 하는 경우엔, 3n + 1 이라고 사용하면 됩니다.

3n 은 3번째마다 적용한다는 말입니다. 하지만 시작이 0이라서 첫 번째 줄부터 적용이 되지 않습니다.
그래서 + 1을 더해서 표시해줍니다.

 

$(function() {
     // 스크립트를 넣을 부분
     $("tr:nth-child(3n+1)").css("background", "#00CCFF");
});

 

No.1
No.2
No.3
No.4
No.5
No.6

 

 

^ㅇ^!!!

 

nth-child 명령 대신 eq라고 사용할 수도 있습니다.

 
이 게시물을...