[JQuery] child 명령

 

지난번에 nth-child를 사용하여 자식 요소를 찾는 방법을 알아보았습니다.

이번에는 nth 외에 다른 child 속성에 대해서 알아보도록 하겠습니다.

 

 

1. first (first-child)

 

first 는 각 객체의 요소 중에 첫 번째 자식에 해당되는 객체를 선택하게 됩니다.

JQuery 1.9.1 전에는 first-child를 종종 사용했었는데, 최근에는 first를 더 자주 사용합니다.

 

테스트를 하기 위해 아래와 같이 예제를 만들었습니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>

<div>ARM-PC</div>
<div>S100-S5PV210</div>
<div>G100-S5PV210</div>
<div>C221-S5PV210</div>

</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

아래 스크립트 부분에 $('div:first') 라고 적어줍니다.

 

body 태그 내에 모든 div 속성에 대해서 first = 첫 번째에 있는 것을 지정한다는 뜻입니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div:first').text();
     console.log(tmp);
});

 

위의 내용을 웹 브라우저에 띄우고, 크롬 개발자 도구에서 결과를 보면 아래와 같이 나타납니다.

 

[Console 결과창]
ARM-PC

 

첫 번째 div 안에 내용인 ARM-PC 가 출력된 것을 알 수 있습니다.

 

 

2. last (last-child)

 

first 가 각 객체의 요소 중에 첫 번째 자식를 선택하는거라면 last는 마지막에 위치한 자식 요소를 선택하는 것입니다.

 

사용 방법은 first 와 유사하게 아래 스크립트 부분에 $('div:last') 라고 적어줍니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div:last').text();
     console.log(tmp);
});

 

위의 내용을 웹 브라우저에 띄우고, 크롬 개발자 도구에서 결과를 보면 아래와 같이 나타납니다.

 

[Console 결과창]
C221-S5PV210

 

 

3. 전체 선택

 

위의 샘플에 있는 모든 div 안에 내용을 출력하고 싶다고 할 때, 사용할 수 있습니다.

 

사용 방법은 eq 안에 원하는 순서를 적어주면 됩니다. 스크립트 부분에 $('div:eq(2)') 라고 적었습니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div':eq(2)).text();
     console.log(tmp);
});

 

위의 내용을 웹 브라우저에 띄우고, 크롬 개발자 도구에서 결과를 보면 아래와 같이 나타납니다.

 

[Console 결과창]
G100-S5PV210

 

 

4. eq

 

eq 는 nth-child 와 거의 유사합니다.

nth-child 첫 번째 요소가 1로 시작되는 반면, eq에서는 0부터 시작합니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div').text();
     console.log(tmp);
});

 

위의 내용을 웹 브라우저에 띄우고, 크롬 개발자 도구에서 결과를 보면 아래와 같이 나타납니다.

eq(2) 라고 입력을 하면, 3번째 요소의 값이 출력됩니다.

 

[Console 결과창]
G100-S5PV210

 

eq에서는 음수로도 표시를 할 수 있습니다.

예를 들어 eq(-1) 라고 입력하고 출력을 해봅니다.

 

[Console 결과창]
C221-S5PV210

 

-1 는 제일 아래부터 즉, last 와 같은 효과를 냅니다.

-2, -3을 입력하면 거꾸로 요소를 찾아가는 것을 확인할 수 있습니다.

 

 

^ㅇ^!!!

 

 

 
이 게시물을...