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

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

문법

$( ':nth-child(an+b)' )
  • ab는 상수, 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 / 맨 위로 부드럽게 이동하는 링크 만들기

사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

.val() .val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 var jb = $( 'input#jbInput' ).val(); 은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 $( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 ...

jQuery / 요소가 순서대로 나타나게 하는 방법

jQuery / 요소가 순서대로 나타나게 하는 방법

.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { box-sizing: border-box; margin: 0px; } .jb { height: 200px; padding: 20px; text-align: center; color: ...

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

jQuery / Method / .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드

jQuery / Method / .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드

.prepend() .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).prepend( '123 ' ); 라고 하면 <p>123 Lorem Ipsum Dolor</p> 으로 출력됩니다. 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

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

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 다음은 홀수 인덱스인 p 요소를 선택한다. 주의할 점은 인덱스가 0부터 시작한다는 것이다. $( 'p:odd' ) 예제 인덱스가 홀수인 li 요소를 선택하고, 글자색을 빨간색으로 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...