사용자 정의 선택자

다양한 CSS 선택자 외에도 jQuery에는 고유한 사용자 정의 선택자가 있다. 사용자 정의 선택자를 이용하면 페이제에서 요소의 위치를 찾는 CSS 선택자의 뛰어난 능력을 더욱 향상시킬 수 있다.

사용자 정의 선택자의 대부분은 대상 목록 가운데에서 특정 요소를 추출하는 데 사용한다. 보통은 CSS 선택자의 뒤에 따라오는데 이런 종류의 사용자 정의 선택자는 이미 선택된 요소의 위치를 이용해 요소를 선택한다. CSS의 의사 클래스(pseudo-class) 구문처럼 사용자정의 선택자의 구문은 콜론(:)으로 시작한다. 예를 들어, horizontal 클래스를 가지는 div 집합 가운데 두 번째 항목을 선택하려고 한다면 다음과 같이 작성할 수 있다.

							$('div.horizontal:eq(1)')
						

:eq(1)은 선택된 집합에서 두 번째 항목이라는 점에 유의하자. 자바스크립트 배열에서 인덱스 숫자는 0부터 시작한다. 즉, 첫 번째 항목의 인덱스가 0이 된다. 이와 다르게 CSS는 1부터 시작하므로 $('div:nth-child(1)')와 같은 CSS 선택자는 부모의 첫 번째 자식에 해당하는 div를 가져온다(이때, $('div:first-child')를 사용할 수도 있다).




행에 징검다리 스타일 입히기

Shakespeare's Plays

As You Like It Comedy
All's Well that Ends Well Comedy 1601
Hamlet Tragedy 1604
Macbeth Tragedy 1606
Romeo and Juliet Tragedy 1595
Henry IV, Part I History 1596
Henry V History 1599

Shakespeare's Sonnets

The Fair Youth 1–126
The Dark Lady 127–152
The Rival Poet 78–86


최소한의 스타일만 적용된 제목과 테이블은 위와 같은 모습으로 단조롭다. 이 테이블은 배경색이 희색이며 각 행을 구분하는 스타일은 적용돼 있지 않다.

이제 테이블의 모든 행에 스타일을 추가하고 홀수 행에는 alt 클래스를 다음과 같이 추가한다.

							.div_sample_table table tr{background:color:#fff;}
							.div_sample_table table tr.alt{background-color:#ccc;}
						

마지막으로, 홀수 번째 테이블 행(<tr> 태그)에 alt 클래스를 추가하는 jQuery 코드를 작성한다. 아래의 코드는 button을 클릭했을 시에 테이블에 스타일이 적용되게끔 작성했다.

							$(document).ready(function(){
								$("#sampleBtn01").click(function () {					
									$(".div_sample_table table tr").removeClass('alt'); // tr에 적용된 .alt 클래스 지우기.
									$(".div_sample_table table tr:even").addClass('alt');
								});
							});
						



잠깐! 여기서 왜 홀수 행을 선택하는데 .even 선택자를 사용했을까? :eq() 선택자를 사용할 때처럼 :even 과 :odd 선택자는 0으로 시작하는 자바스크립트의 번호를 사용한다. 따라서 첫 번째 행은 0(짝수)으로 표현하고, 두 번재 행은 1(홀수)로 표현한다. 이 점을 염두에 두면 테이블은 다음 그림과 같은 모습이 된다. 위의 버튼을 눌러서 확인해 보면 알 수 있다.

여기서 두 번재 테이블을 눈여겨보자. 아마도 의도했던 것과는 조금 다르게 표시될 것이다. 첫번재 희곡 테이블의 마지막 행의 배경이 회색이기 때문에 다음 소네트 테이블의 첫 번재 행은 의도한 바와 다르게 배경색이 희색이 된다. 이 문제를 해결하는 방법 가운데 하나는 :nth-child() 선택자를 사용하는 것이다. :nth-child() 선택자를 이용하면 요소의 위치를 지금까지 선택된 모든 요소 간운데에서의 위치가 아닌 부모 요소가 같은 자식 요소에서의 위치를 이용하게 된다. 이 선택자의 인자로 숫자와 odd 혹은 even을 지정할 수 있다.

							$(document).ready(function(){
								$("#sampleBtn02").click(function () {	
									$(".div_sample_table table tr").removeClass('alt');
									$(".div_sample_table table tr:nth-child(odd)").addClass('alt');
								})
							});
						

앞서 언급했듯이 :nth-child()은 1부터 시작하는 유일한 jQuery 선택자라는 점에 주의하자. (사실 css3에서 사용되는 :nth-child() 선택자이므로 css선택자의 첫번재 항목은 1부터 시작한다는 원칙에 부합한다.) 두 테이블에 위와 마찬가지로 홀수 번째 행에 줄무늬를 넣으려면 even이 아니라 odd를 인자로 이용해야 한다. 이렇게 선택자를 지정하면 아래 버튼을 클릭해서 결과를 확인할 수 있는 거와 같이 두 테이블 모두 원하는 형태의 줄무늬가 나타난다.

참고로 다른 방법은 없을까? 테이블마다 실행되도록 하는 .each() 메서드를 이용하는 방법도 있다. 이후에 다시 확인해 보도록 한다.