2018-01-12(JQuery 자식 요소 선택 방법 및 찾기 Children(), find())

.Children()

JQuery를 사용하여 간단하게 자식 요소를 선택하는 방법을 알아보려고 합니다. 자식 요소를 선택하는 방법에는 children() 함수가 많이 사용됩니다. 이 외에도 find() 함수가 존재하는데 오늘은 children()에 대하여 자세히 알아봅니다.

#JQuery children() 자식 요소 얻기

위에 잠시 언급한 find() 그리고 오늘 알아볼 children()의 차이점을 알아보겠습니다. 이 둘의 차이점이라면 children()은 부모 요소의 바로 아래 단계인 자식요소만 선택할 수 있으나, find()는 부모 태그의 모든 하위 요소의 자식을 선택하여 가져올수 있다는 점이 차이점이다. 그럼 children()의 간단한 사용방법은 아래와 같습니다.

$(element).children(option)

괄호안의 선택옵션은 필수가 아닌 선택입니다. 만약 옵션을 입력할 경우 특정 요소만 필터링 하여 반환하는 것이 가능합니다. 즉 아래와 같이 사용할 수 있습니다.

!children() 옵션 사용하여 찾기 예제보기

아래는 red라는 클래스 명을 가진 자식 요소만 찾아서 반환합니다.

@children.html

<div>
    <span class = 'red'>1 child element</span>
    <span class = 'blue'>2 child element</span>
</div>

@children.js

$('body').children('.red');
//red 클래스명의 자식요소만 찾아 

위 코드를 실행하면 red 클래스를 가진 요소만 선택됩니다. 그럼 아래에서 다른 방법의 예제를 알아보세요.

# children()함수 예제보기

이번 예제는 모든 자식요소를 jQuery 셀렉터로 선택하는 방법을 알아보려합니다.여기서는 div태그의 자식 요소를 먼저 성택해보겠습니다. 그리고 이를 변수 childrens에 저장해보겠습니다.

@children.html

<div>
    <p class = 'test1'>
    <p class = 'test2'>
</div>

@children.js

var childrens = $('div').children();

실행하면 위 태그에서 div 태그의 모든 자식요소가 변수에 저장되었을 것입니다. 즉 변수 childrens는 div태그 요소의 모든 자식 요소들이 저장되었습니다.

(참고로 일반적으로 제이쿼리 엘리먼트 요소를 변수로 저장할때는 $를 앞 또는 뒤에 추가하여 나타냅니다. 즉 childrens 보다는 $childrens 또는 childrens$ 로 사용합니다.)

#자식 요소에서 원하는 요소만 선택하는 방법

그럼 또 다른 예제입니다. 앞에도 알아봤지만 옵션을 선택하면 자식 요소의 필터링... 즉 좀더 정확한 자식 요소만 가져올 수 있습니다.
(자식 요소들 중에서 원하는 요소만 선택할 수도 있음.)

바로 괄호 안의 매개변수로 선택사항을 추가입력하면 됩니다. 아래 예제를 봐주세요.

!자식 요소중에서 span 태그 요소만 가져오기

이번에는 자식 요소에서 span 태그 요소만 가져오는 방법입니다.

@children.html

<div>
    <span>1</span>
    <span>2</span>
    <p>3</p>
</div>

태그의 이름이 span인 것만 가져오기 위해 아래처럼 스크립트를 작성 후 실행합니다.

@children.js

$('div').children('span');

.find()

개요 : 선택된 요소 집합에서 선택자, jquery 객체, 요소와 같은 인자에 맞는 요소들을 걸러내어 줍니다.

.find(selector)  *selector : 일치하는 요소를 위한 선택자가 표현된 문자열*

.find(jQuery object) *jQuery object : 요소를 찾을 jQuery 객체*

.find(element) *element : 요소를 찾을 요소 표현*

jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .find()함수를 사용하면 DOM tree 에서 하위(자식) 요소들을 찾아내어 새로운 jQuery 객체를 생성합니다. .find() 와 .children() 함수는 비슷합니다. 하지만 .children() 함수는 직계 자식 요소만을 추출할 수 있는 것이 .find()함수와 다른 점입니다.

예제를 보겠습니다.

<ul class="level-1"> 
    <li class="item-i">I</li> 
    <li class="item-ii">II
        <ul class="level-2"> 
            <li class="item-a">A</li> 
            <li class="item-b">B 
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>    
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>
 

item II를 기준으로 li 요소들을 모두 찾아내는 스크립트는 아래와 같습니다.

$('li.item-ii').find('li')

이 스크립트에 영향을 받는 li 요소들은 A,B,1,2,3,C 입니다. 즉, 하위 (자식)요소들을 깊이에 상관없이 모두 찾아내어 준다는 뜻입니다. 위에서도 말씀드렸듯이 .children()과 가장 큰 차이점입니다.

참고로 jquery 객체를 .find() 함수에 인자로 넣을 수 있습니다. 아래와 같은 방법으로 해보십시오.

var $allListElement = $('li');
$('li.item-ii').find($allListElement);