6. jquery Selector [ :nth-child() ] - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

문법

$(":nth-child(n)")

-설명-

1. a와 b는 상수이고, n은 변수

2. n은 (0, 1, 2, 3, 4, ...) 차례대로 대입

3. an+b 대신 even, odd 사용 가능

예제 코드

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
	<head>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<title>Home</title>
	</head>
	<script type="text/javascript">
    $(document).ready(function(){
      $("#ul0 li:nth-child(3)").css("color", "green");
      $("#ul1 li:nth-child(n+1)").css("color", "red");
      $("#ul2 li:nth-child(2n+1)").css("color", "blue");
      $("#ul3 li:nth-child(even)").css("color", "gray");
    });
	</script>
	<body>
		<ul id="ul0">
			<li>L</li>
			<li>O</li>
			<li>L</li>
		</ul>
		<ul id="ul1">
			<li>A</li>
			<li>B</li>
			<li>C</li>
		</ul>
		<ul id="ul2">
			<li>D</li>
			<li>E</li>
			<li>F</li>
		</ul>
		<ul id="ul3">
			<li>G</li>
			<li>H</li>
			<li>I</li>
			<li>J</li>
		</ul>
	</body>
</html>

$("#ul0 li:nth-child(3)").css("color", "green");

- id가 ul0인 태그안에 li태그의 형제들중 3번째 요소를 선택하고 color를 green으로 바꿉니다.

$("#ul1 li:nth-child(n+1)").css("color", "red");

- n은 0부터 1씩증가하기 때문에

nth-child()의 괄호안에 값은 1부터 1씩증가하겠지요.

그럼 첫번째, 두번째, 세번째 요소들은 color가 red로 바뀝니다.

$("#ul2 li:nth-child(2n+1)").css("color", "blue");

- id가 ul2인 태그안에 li태그의 형제들중 2n+1번째 요소를 선택하고 color를 red로 바꿉니다.
nth-child() 괄호안에 값은 1, 3, 5...

홀수번째 요소에 color를 바꿔줍니다.

$("#ul3 li:nth-child(even)").css("color", "gray");

- id가 ul2인 태그안에 li태그의 형제들중 짝수번째 요소에 color를 gray로 바꿉니다.

실행 테스트