티스토리 뷰

jQuery

[jQuery] 자식 요소 필터 선택자

자식 요소 필터 선택자

자식 요소들을 선택 하는 방법입니다.


자식 요소 필터 선택자(Child Filters)

자식 요소 필터 선택자
종류 설명
:first-child 첫 번째 자식 요소를 선택합니다.
:last-child 마지막 번째 자식 요소를 선택합니다.
:first-of-type 자식 중 첫 번째 유형의 자식 요소를 선택합니다.
:last-of-type 자식 중 마지막 번째 유형의 자식 요소를 선택합니다.
:nth-child() index번째에 있는 자식 요소를 선택합니다.
:nth-last-child() index번째에 있는 마지막 자식 요소를 선택합니다.
:nth-last-of-type() index번째에 있는 마지막 유형의 자식 요소를 선택합니다.
:nth-of-type() index번째에 있는 유형의 자식 요소를 선택합니다.
:only-child 자식 요소가 오직 하나인 요소를 선택합니다.
:only-of-type() 자식 요소 중 오직 하나 유형인 요소를 선택합니다.
Sample : 보임 필터 선택자
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
			$(document).ready(function(){
				$("li:first-child").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:first").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:last-child").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:last").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:nth-child(3)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:nth-child(even)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:nth-child(odd)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:nth-child(2n)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:nth-child(2n+1)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$("li:only-child").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
			});
		
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul>
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>				
				<li class="one7">one7</li>
				<li class="one8">one8</li>
				<li class="one9">one9</li>
				<li id="one10">one10
					<ul>
						<li>one10-1<img src="../css.png" alt="이미지"></li>
						<li>one10-2<img src="../html5.png"></li>
						<li>one10-1</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>   
댓글
댓글쓰기 폼