:nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

jQuery
Created 2018-04-02 Last Modified 2022-12-15

:nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다.

1 문법
2 예제
3 참고

문법

$( ':nth-child(an+b)' )

a와 b는 상수, n은 변수입니다.
n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다.
an+b 대신에 even, odd를 사용할 수 있습니다.

예제

`$( 'ol li:nth-child(2)' )`

ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .jb-red { color: red; }
    </style>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      jQuery( document ).ready( function() {
        $( 'ol li:nth-child(2)' ).addClass( 'jb-red' );
      } );
    </script>
  </head>
  <body>
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
      <li>Seven</li>
      <li>Eight</li>
      <li>Nine</li>
      <li>Ten</li>
    </ol>
  </body>
</html>

`$( 'ol li:nth-child(2n+1)' )`

n=0일 때 1, n=1일 때 3, n=2일 때 5, ···이므로, 홀수 번째 요소를 선택합니다.

$( 'ol li:nth-child(2n+1)' ).addClass( 'jb-red' );

`$( 'ol li:nth-child(3n+5)' )`

n=0일 때 5, n=1일 때 8, n=2일 때 11, ···이므로, 다섯 번째 요소, 여덟 번째 요소, 열한 번째 요소, ···를 선택합니다.

$( 'ol li:nth-child(3n+5)' ).addClass( 'jb-red' );

`$( 'ol li:nth-child(odd/even)' )`

odd는 홀수 번째 요소를, even은 짝수 번째 요소를 선택합니다.

$( 'ol li:nth-child(even)' ).addClass( 'jb-red' );

`$( 'ol li.jb:nth-child(2n+1)' )`

ol 요소의 자식 요소 li의 홀수 번째 요소 중에서 클래스 값으로 jb를 갖는 요소를 선택합니다. 클래스 값으로 jb를 갖는 요소 중에서 홀수 번째를 선택하는 게 아니라는 것에 주의합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .jb-red { color: red; }
    </style>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      jQuery( document ).ready( function() {
        $( 'ol li.jb:nth-child(2n+1)' ).addClass( 'jb-red' );
      } );
    </script>
  </head>
  <body>
    <ol>
      <li>One</li>
      <li class="jb">Two</li>
      <li class="jb">Three</li>
      <li class="jb">Four</li>
      <li class="jb">Five</li>
      <li class="jb">Six</li>
      <li class="jb">Seven</li>
      <li class="jb">Eight</li>
      <li class="jb">Nine</li>
      <li class="jb">Ten</li>
    </ol>
  </body>
</html>

참고

IE 8에서 :nth-child() 선택자를 사용하고 싶다면 jQuery 1.x 버전을 사용합니다.

jQuery

jQuery / Method / .load()

.load() .load()는 다른 문서 등에서 내용을 가져와 현재 문서에 나타냅니다. 문법 .load( url ) 예를 들어 a.html의 p 요소를 가져와 div 요소 안에 넣으려면 다음과 같이 합니다. $( 'div' ).load( 'a.html p' ); 예제 load-02.html에서 id 값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣습니다. load-01.html <!doctype html> <html lang="ko"> ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

jQuery / 동적 셀렉트(select) 만드는 방법

앞의 select에서 선택을 하면, 그 값에 따라 뒤의 select의 선택 항목이 바뀌게 하는 것을 동적 셀렉트라고 하는 거 같다. 예를 들어 앞의 select에서 서울을 선택하면, 뒤의 select의 option이 강남구, 송파구 등으로 바뀌는 것. 아래는 jQuery를 이용해서 만든 간단한 동적 셀렉트 예제이다. onchange을 이용하여 값의 변화를 인식하고 optionChange() 함수를 실행한다. 변수 a에는 A를 선택했을 ...

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

개요 .length는 선택한 요소의 개수를 반환하는 속성이다. 예를 들어 다음은 div 요소의 개수를 반환한다. $( 'div' ).length 예제 1 버튼을 클릭하면 li 요소의 개수를 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ...

jQuery / input 값 변화 감지하기 / change, keyup

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

.slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

.removeAttr() .removeAttr()은 선택한 요소의 특정 속성을 제거한다. 문법 attributeName 속성을 제거한다. .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거한다. $( 'h1' ).removeAttr( 'title' ); 예제 input 요소의 placeholder 속성을 제거한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> input { font-size: ...

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

.click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. 문법 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).click( function() { // function } ); 예제 문단을 클릭하면 테두리가 생깁니다. 다시 클릭하면 테두리가 사라집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

:empty는 내용이 없는 빈 요소를 선택하는 선택자이다. 문법 $( ':empty' ) 예를 들어 다음은 div 요소 중 내용이 없는 것을 선택한다. $( 'div:empty' ) 예제 표에서 내용이 없는 셀에 N/A 문자열을 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> table { ...