jQuery Filter - 자식필터 Child Filter

jinmuk

· 12년 전 · 조회 1999 1999

자식필터<Child Filter>
아래 목록을 통해 나열된 내용을 보면 이번강의 초반에 나왔던 필터와 비슷하게 보이실 겁니다. 사용하는 구문도 많은 부분이 비슷하지만 결과는 정말 다릅니다. 우선 자식필터(Child Fiter)에 대해 간단히 정리하고 앞서 말한 결과의 차이에 대해 알아 보기로 하겠습니다.

필터 종류 및 형식	필터 설명
:first-child	자식 요소 중 첫번째에 해당하는 요소를 모두 반환합니다.
:last-child	자식 요소 중 마지막에 해당하는 요소를 모두 반환합니다.
:nth-child(index/odd/even/equation)	자식 요소 중 지정된 값에 해당하는 요소를 모두 반환합니다.
:only-child	자신이 부모 요소와 유일한 자식인 모든 요소를 반환합니다.
표 1. [jQuery 자식(Child)필터의 종류]

앞서 다룬 기본 필터와 유사한 모습을 하고 있어 많은 분들이 비슷한 동작을 하지 않을까 하고 생각 하시는 경우가 많으나, 기본 필터와는 많은 부분에서 차이가 존재합니다. 기본필터의 :first, :last의 경우 해당되는 단일 요소만 선택하지만 자식필터(Child Filter)의 경우 단일요소가 아닌 집합을 선택 하게 됩니다.

테이블의 “td” 요소를 기준으로 두개의 차이점을 비교해 보았습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Script Here
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
        </table>
    </div>
</body>
</html>

<script type="text/javascript">
        $(document).ready(function () {
            $("td:first").css("background", "red");
        });
</script>

[기본 필터 :first를 사용한 결과]

<script type="text/javascript">
        $(document).ready(function () {
            $("td:first-child").css("background", "red");
            $("td:last-child").css("background", "yellow"); 
        });
</script>

[자식필터인 :first-child, :last-child를 사용한 결과]

두개의 차이점이 보이시나요 ? 기본 필터인 :first의 경우 “td”요소 하나만 선택하는 반면 :first-child, :last-child는 첫번째 마지막 수준의 “td”요소를 모두 선택합니다.

:nth-child

마지막으로 nth-child라는 필터에 대해 알아 보겠습니다.

기본적인 동작은 다른 자식필터와 동일합니다. 특이한 점은 index, even, odd 같은 값을 지정하여 사용을 하거나 수식을 이용하여 규칙적인 동작을 하도록 할 수 있다는 점입니다.

예를 들면 다음과 같은 형태를 가지고 있습니다.
$(“td:nth-child(0)”), $(“td:nth-child(even)”), $(“td:nth-child(2n+1)”) 앞에 두가지 경우에 대해서는 앞에서 설명한 내용만으로 충분히 이해가 되실꺼라 생각하며 마지막 수식을 이용한 자식필터에 대해 간단히 설명을 하도록 하겠습니다.

$(“td:nth-child(2n+1)”)을 풀어보면 2의배수(2n)에 1을 더한 값에 해당하는 위치에 있는 요소를 선택을 하게 됩니다. 여기서 가장 중요한 부분은 n은 1이 아닌 0부터 시작을 한다는 것입니다. 1이 아닌 0부터 시작을 하므로 수식을 풀면 “1, 3, 5, 7, 9, 11…”의 형식이 됩니다. 다음 예제를 통해 정말 위에 풀이한 값이 맞는지 확인을 해 보도록 하겠습니다.

[:nth-child 필터를 사용한 결과 (수식에 일치하는 항목을 찾아 붉은색으로 표시합니다.) ]

앞에서 계산 값(1, 3, 5, 7, 9, 11…)처럼 해당 요소가 선택 되어진 결과를 볼 수 있습니다. 1이 아닌 0으로 시작한다는 것만 다시 강조 드리면서 필터에 대한 이야기를 여기서 정리를 합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
26560	기획서 파워묵업 Power MockUP good story board! [광고가 아닙니다 ㅠ.ㅠ]	SOFTA	5,972	11년 전
24588	결과보고서 양식좀 노나 주세요 ㅠ 10	LaRuota	1,582	11년 전
31642	CSS CSS과정 - 5. Backgrounds 3	신리	1,736	11년 전
31638	CSS CSS과정 - 4. How to 3	신리	1,759	11년 전
31633	CSS CSS과정 - 3. Selectors 4	신리	1,860	11년 전
31630	CSS CSS과정 - 2. Syntax 2	신리	2,265	11년 전
31625	CSS CSS과정 - 1. Introduction 4	신리	3,859	11년 전
19452	기타 안녕하세요! 저희가 만든 채팅프로그램 소개합니다^^ 1	천기소년	2,255	11년 전
6719	개발자 개발자님 찾아요	level999	1,018	11년 전
6718	개발자 제작자구합니다~	실12도	801	11년 전
6717	개발자 개발자님 구해요	투잡마켓	941	11년 전
6715	개발자 비용과 기간문의 1	북금곰	1,043	11년 전
27797	이런 움직임의 소스는 가격이 얼마나 되나요 2	북금곰	1,303	11년 전
30907	기타 mms 스트리밍 동영상 다운로드 방법	신리	15,422	11년 전
30904	기타 에딧플러스에서 HOME 키 설정 2	지운아빠	1,419	11년 전
6714	동영상 컨텐츠 싸이트 수정 또는 제작 가능한분 찾습니다	짱가님	560	11년 전
6713	구글 앱메세지 연동된 앱 개발하실수 있는분 있나요?	미라클	591	11년 전
27791	xp지원이 끝나도.. 5	임소야	865	11년 전
19450	JavaScript 제니퍼소프트, UI 소스 오픈 하여군요 1	비혼	3,125	11년 전
6712	반응형 이렇게 만들면 얼마나 들까요? (프로그래머 찾습니다)	사랑해요79	953	11년 전
6711	사이트 수정/추가기능 해주실 프로그래머분 찾습니다	바다11	734	11년 전
6709	고정주소 쓸만한게 있네요. 1	KKMS	773	11년 전
6708	모바일쇼핑몰 만들어주실분 구해요	곰팽	629	11년 전
27790	옛날 킴스몰솔루션 으로 제작된 쇼핑몰 모바일 쇼핑몰 제작해 주실분	곰팽	823	11년 전
19447	jQuery 좋은... swipe 스크롤 2	열매	1,576	11년 전
6706	질문좀 드립니다. 1	장미란	549	11년 전
6703	안녕하세요 유튜브 동영상관련해서 질문좀 드립니다. 2	장미란	988	11년 전
6702	그누보드 포인트활용 게임	녹색의자	1,656	11년 전
6701	이렇게 구현하는 방법좀 알려주실분 ㅠ	2donggalbi	502	11년 전
6697	sphinx 좋네요. 3	명랑폐인	1,376	11년 전
6692	홈페이지를 크롬에서 보면 전체 내용이 안보입니다. 4	니콜	704	11년 전
27783	웹페이지에서 사용한 글자만 웹폰트로 만들기? 6	모노폴리	852	11년 전
6691	바로빌 전자세금계산서 연동의뢰드립니다	열라뽕똬이	1,298	11년 전
6687	[질문]그누보드->하이브리드앱제작 3	this1mg	1,587	11년 전
6685	글씨체잘아시는분.. 1	sbdossb	563	11년 전
6683	모바일 셀렉트박스 클릭시 문제가 발생했는데요.. 1	봉보로봉봉	1,138	11년 전
6682	작업요청 드립니다.	똘똘이스머츠	486	11년 전
19446	PHP 이미지 파일을 base64 로 인코딩하여 전송 및 보여주기	네이비컬러	3,633	11년 전
27770	아이시빌 사용자가 늘고 있나봅니다. 12	임소야	1,058	11년 전
19445	PHP phpinfo 페이지 내에 삽입하기	네이비컬러	1,304	11년 전
27768	제이쿼리 이부분 어떻게 수정해야할까요?? 1	버블팝	1,126	11년 전
6681	서버셋팅 부탁드리겠습니다.	가마니	574	11년 전
6675	질문...모바일에서 밀어서 이동하는 버튼을 뭐라고 하는지... 5	그누하마	702	11년 전
6674	모바일쇼핑몰 접속시 홈버튼 자동추가	프레쉬	596	11년 전
19444	jQuery swipe 좌우스크롤	열매	5,044	11년 전
6672	모바일 페이지 제작가능하실분 없을가요?? 1	코다	540	11년 전
6671	그누보드 게시판 기능 의뢰 받아주실분 구합니다!!!!ㅠㅠ	asfasdfd235	557	11년 전
27761	퍼블리셔 연봉 정보 6	웹작가	3,016	11년 전
6670	영카드4 테이블 명세서는 없는지요?	벤지	869	11년 전
30900	HTML 브라우저별 그리고 브라우저 버전별 웹사이트 확인방법 3	박달나무	4,408	11년 전
24585	[초보]기획자의 길로 들어서다 보니 모르는게많네요 2	김한상	1,790	11년 전
6660	워드프레스 고수님들 계신가요?? 9	퍼블리셔지노군	2,600	11년 전
6655	헬푸~~ URL 을 메소드로 이용할려면 어떻게 할까요? ㅜ ㅜ 4	검은여우	533	11년 전
6653	게시판 어떤언어로 ... 1	북금곰	554	11년 전
31624	홈페이지기초 HTML과정 - 20. HTML colors	신리	1,430	11년 전
6651	onclick 소스 질문 드립니다. 1	열심히정	616	11년 전
31623	홈페이지기초 HTML과정 - 19. HTML iframes	신리	1,587	11년 전
31621	홈페이지기초 HTML과정 - 18. HTML forms 1	신리	1,583	11년 전
19443	MySQL MYSQL 오늘 날짜 뽑아오기	리얼홀릭	4,444	11년 전
6650	파이썬 mysql 설치 질문입니다.	Abilityarch	946	11년 전
31620	홈페이지기초 HTML과정 - 17. HTML layout	신리	2,110	11년 전
31619	홈페이지기초 HTML과정 - 16. HTML blocks	신리	1,393	11년 전
31612	홈페이지기초 HTML과정 - 15. HTML lists 6	신리	1,428	11년 전
31611	홈페이지기초 HTML과정 - 14. HTML tables	신리	1,509	11년 전
27746	내용 리스트을 표현할때 어떤 방식이 좋을지요? 14	벤지	731	11년 전
31605	홈페이지기초 HTML과정 - 13. HTML images 5	신리	1,605	11년 전
6648	안녕하세요~ 1	버거퀸	449	11년 전
20781	정규표현식 최신 그누보드5 common.lib.php 내의 정규표현식 관련 풀이 (3) 7	유창화	3,736	11년 전
31603	홈페이지기초 HTML과정 - 12. HTML Styles - CSS 1	신리	1,836	11년 전
31600	홈페이지기초 HTML과정 - 11. HTML head 2	신리	1,637	11년 전
6645	포트가 열려있는지 확인하는 것을 HTML자체로 짤 수 있나요? 2	김루노	1,275	11년 전
6643	모바일웹, 바탕화면에 아이콘 만드는 소스를 구합니다. 1	cityman	6,796	11년 전
6642	ASP웹사이트에 페이팔연동	순구	1,245	11년 전
6640	펜션예약스킨에 카드결제 모듈붙여주실분 1	의정부아줌마	847	11년 전
20777	정규표현식 최신 그누보드5 common.lib.php 내의 정규표현식 관련 풀이 (2) 3	유창화	2,359	11년 전
31597	홈페이지기초 HTML과정 - 10. HTML Links 2	신리	1,684	11년 전
6637	프로시저 사용법좀 알려주십시오 2	가마니	806	11년 전
19442	PHP date 함수를 이용하여 주를 날짜로 변환하기	관리자	1,197	11년 전
31594	홈페이지기초 HTML과정 - 9. HTML comments (주석처리) 2	신리	2,584	11년 전
31591	홈페이지기초 HTML과정 - 8. TEXT Formatting 2	신리	1,943	11년 전
31589	홈페이지기초 HTML과정 - 7. HTML Paragraphs 1	신리	1,776	11년 전
31586	홈페이지기초 HTML과정 - 6. HTML headings(H1~H6) 2	신리	2,070	11년 전
31584	홈페이지기초 HTML과정 - 5. HTML 속성 1	신리	2,339	11년 전
20758	정규표현식 최신 그누보드5 common.lib.php 내의 정규표현식 관련 풀이 (1) 18	유창화	3,122	11년 전
19440	PHP php array 로 만든 페이징 1	천국나무	2,690	11년 전
31575	홈페이지기초 HTML과정 - 4. HTML 엘리먼트 8	신리	2,789	11년 전
31567	홈페이지기초 HTML과정 - 3. HTML 기초 예제들 7	신리	3,499	11년 전
20747	정규표현식 (실무예제) 다음 메인페이지에서 실시간 이슈 부분을 가져오기 10	유창화	3,253	11년 전
6636	(그누보드4 + 동영상솔루션)기반 사이트 -> 그누보드5 + 영카트5(고도화) 작업의뢰	아트291	678	11년 전
31563	홈페이지기초 HTML과정 - 2. HTML 편집기(editors) 3	신리	4,154	11년 전
31552	홈페이지기초 HTML과정 - 1. HTML이 무엇인가? 10	신리	5,164	11년 전
27743	[질문]Window8에서 플래시문제.. 2	태원	879	11년 전
24579	수익모델을 찾는건 어렵다 5	iwebstory	2,089	11년 전
6630	그누보드5로는 상업적프로그램 안됨 5	바트형아	1,262	11년 전
6628	하이브리드앱만들때 1	netdf	603	11년 전
6620	그누5 업데이트시 mysql이 변경되었다면... 7	Terrorboy	996	11년 전
6617	모바일 코팅 프로그래머 2	제구기	657	11년 전
27732	LESS/SASS -ㅁ-.... 10	LaRuota	2,664	11년 전
24577	간단한 작업 맡으실분 계신가요 1	울산굿모닝	1,647	11년 전
6616	node로 된 트래픽 모니터링 프로그램 없을까요?	Terrorboy	657	11년 전

이전 다음

12 13 14 15 16

전체 목록