본문 바로가기
javascript/jQuery

jQuery .children() .parent() 배워보기!

by 산코디 2023. 1. 2.

오늘은 jQuery의 자식 요소를 찾아주는 children과 부모 요소를 찾아주는 prarent 함수에 대해서 정리해 보려고 한다. DOM 트리에서 요소를 탐색하고 조작하는 데 사용되는 메서드이며, 다양한 상황에 응용될 수 있는 함수다.


children과 parent 함수의 개념

children과 parent 함수는 이름에서도 알 수 있듯이 자식과 부모 요소를 찾을 수 있도록 도와주는 기능의 함수다. 두 함수 모두 DOM 객체 내에서 요소 간의 관계를 탐색하고 조작할 때 편리하게 활용할 수 있으며, 특정 요소의 직계 자식 요소를 선택하여 스타일을 변경하거나, 특정 요소의 부모 요소를 선택하여 이벤트를 추가하는 등의 작업을 수행할 수 있다.


children()
children 함수는 선택한 요소의 직계 자식 요소를 선택하는 함수다. 즉 해당 요소의 하위 단계 자식 요소만 선택할 수 있다. 예를 들어, $(selector).children()은 선택한 selector 요소의 자식 요소를 선택하게 된다.
선택한 요소의 자식 요소 중에서 특정 필터를 적용하여 특정 자식 요소만 선택할 수 있다.
$selector).children('div')는 선택한 요소의 직계 자식 중에서 <div> 요소만 선택한다.

parent()
parent 함수는 선택한 요소의 부모 요소를 선택한다. 즉, 해당 요소의 한 단계 위에 있는 부모 요소를 선택한다.
예를 들어, $(selector).parent()는 선택한 요소의 부모 요소를 선택한다.
선택한 요소의 부모 요소 중에서 특정 필터를 적용하여 특정 부모 요소만 선택할 수 있는데, $(selector).parent('div')는 선택한 요소의 부모 중에서 <div> 요소만 선택한다.


children, parent 함수의 활용 사례

children과 parent 함수는 다양한 상황에서 활용될 수 있다.


하위 메뉴 슬라이드 다운

<ul class="menu">
    <li>메뉴 1
        <ul class="submenu">
            <li>서브메뉴 1-1</li>
            <li>서브메뉴 1-2</li>
        </ul>
    </li>
    <li>메뉴 2</li>
    <li>메뉴 3</li>
</ul>
<script>
// 메뉴에 마우스를 올리면 해당 메뉴의 하위 메뉴를 보여줌
$('.menu > li').hover(
    function () {
        $(this).children('.submenu').slideDown();
    },
    function () {
        $(this).children('.submenu').slideUp();
    }
);
</script>

위의 코드는 children 함수를 사용하여 메뉴와 서브메뉴를 펼치고 접는 기능을 구현한 예제 코드다.

$('.menu > li') 부분은 .menu 클래스 아래의 직계 자식 ('>')인 li 요소들을 선택한다.
$(this).children('.submenu') 여기서 this는 현재 hover된 li 요소를 가리키며, $(this)는 현재 hover된 li 요소를 jQuery 객체로 선택하게 된다. 그 후, .children('.submenu')를 호출하여 li 요소의 하위에 있는 .submenu 클래스를 가진 요소를 선택한다.

.slideDown()과 .slideUp() 함수를 활용해서 선택된 하위 요소들을 아래로 슬라이드 다운시키거나 업시키는 애니메이션 효과를 적용한다.

즉, children 함수를 사용하여 해당 메뉴의 하위 메뉴를 선택하고 hover 이벤트에 따라 슬라이드 다운 또는 업을 적용하여 메뉴를 보여주거나 감추는 기능이다.


특정 클래스로 필터링된 하위 요소 선택

<div class="container">
    <div class="item">아이템 1</div>
    <div class="item special">특정 아이템</div>
    <div class="item">아이템 2</div>
</div>
<script>
// 특별한 아이템만 스타일 적용
$('.container').children('.special').addClass('highlight');
</script>

위의 코드는 .container 클래스의 자식 요소 중에서 .special 클래스를 가진 요소에 highlight 클래스를 추가하는 예제다.

$('.container') 부분은 .container 클래스를 가진 요소를 jQuery 객체로 선택하고, 선택된 .container 요소의 자식 중에서 .special 클래스를 가진 요소를 선택한다.
선택된 요소에 .addClass('highlight') 코드를 통해서 클래스를 추가한다.

즉, children() 함수를 사용하여 .container 클래스의 자식 요소 중에서 .special 클래스를 가진 요소를 선택하고, 선택된 요소에 highlight 클래스를 추가하는 기능이다.


삭제 버튼으로 요소 삭제

<ul>
    <li>아이템 1 <button class="delete">삭제</button></li>
    <li>아이템 2 <button class="delete">삭제</button></li>
</ul>
<script>
// 삭제 버튼 클릭 시 해당 아이템 삭제
$('.delete').click(function () {
    $(this).parent().remove();
});
</script>

위의 코드는 삭제 버튼이 클릭되면 해당 아이템을 삭제하는 기능을 구현한 예제다.

.delete 클래스를 가진 버튼 요소를 jQuery 객체로 선택하고, 선택된 버튼 요소의 클릭 이벤트가 발생하면 핸들러 함수가 실행된다.
클릭된 버튼의 부모 요소인 <li>를 선택하고 remove() 함수를 호출하여 해당 아이템을 삭제한다.

즉, 클릭된 삭제 버튼 $('.delete')의 부모 요소인 <li>를 선택하고, 선택된 요소를 삭제하는 기능을 구현하는 예제다.


form 요소와 연관된 레이블 스타일 변경

<form>
    <label for="username">사용자명:</label>
    <input type="text" id="username" name="username">
</form>
<script>
// 입력 필드에 값이 입력되면 레이블 색상 변경
$('input').keyup(function () {
    $(this).parent().children('label').css('color', 'green');
});
</script>

위의 예제는 입력 필드에 값을 입력할 때마다 해당 입력 필드와 관련된 레이블의 색상을 변경하는 기능을 구현한 예제 코드다.

$('input')을 통해서 모든 입력 필드를 jQuery 객체로 선택하고, 선택된 입력 필드에 키가 눌릴 때마다 키보드 이벤트 핸들러를 추가한다.
이벤트가 발생하면 $(this)를 통해 선택된 입력 필드에 .parent()로 부모 요소인 <form>을 선택한다.
선택된 <form> 요소의 자식 요소 중 <label> 태그를 선택한다. 선택된 <label> 요소의 색상을 초록색으로 변경한다.

즉, 입력 필드에 값을 입력할 때마다 해당 입력 필드의 부모 요소인 <form>에서 자식 요소 중 <label>을 찾아 그 색상을 초록색으로 변경하는 기능이다.

children 함수 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    const inputValue = $('#rootId').children('.input_class_01').val();
    const childId01 = $('#rootId').children('.child_class').children('#childId01').text();
    const childId02 = $('#rootId').children('.child_class').children('#childId02').text();

    console.log(inputValue);
    console.log(childId01);
    console.log(childId02);
});
</script>

<div>
    <div id="rootId">
        <span>Parent</span>
        <hr>
        <input type="text" class="input_class_01" value="안녕하세요."/>
        <div class="child_class">
            <span id="childId01">반갑습니다.</span>
            <br>
            <span id="childId02">산코디입니다.</span>
        </div>
    </div>
</div>

위의 코드는 children을 활용한 예제 코드다.
div를 root tag로 해서 간단하게 구성을 하였으며, 위의 소스에서는 #rootId 기준으로 자식 요소를 찾도록 코드를 작성하였다.

선택한 부모 요소 태그에서 .children() 함수를 추가하고 인자값으로 찾을 자식 요소 정보를 넣어주면 된다.
여기서 주의할 점은 children은 바로 1 레벨 밑에 있는 요소만 찾을 수 있다.

1. 좋은 예 (하위 1 레벨 찾기)
$('#rootId').children('.input_class_01').val();
2. 안 좋은 예 (하위 1 레벨 건너뛰고 2 레벨 찾기)
$('#rootId').children('#childId01').text();

위의 1번 예시처럼 1 레벨씩 찾는 건 가능하지만 2번 예시처럼 중간을 건너뛰고 하위 요소를 찾는 건 불가능하다.
그럼 2번 같은 경우를 찾아보도록 하자.

1. 안 좋은 예 (하위 1 레벨 건너뛰고 2 레벨 찾기)
$('#rootId').children('#childId01').text();
2. 좋은 예 (하위 1 레벨 찾고 2 레벨 찾기)
$('#rootId').children('.child_class').children('#childId01').text();

위의 예시처럼 한 레벨씩 찾아 내려가면 찾을 수 있다.

하지만 위의 예시처럼 찾는다면 레벨을 많이 내려가게 되는 경우는 코드가 굉장히 길어지고 가독성이 떨어지게 된다.

실행 결과

실행 결과는 위와 같이 children으로 자식 요소를 잘 찾아 콘솔을 출력한 모습이다.

부모 요소에서 자식 요소를 찾았으니 다음은 자식 요소에서 부모 요소를 찾는 parent() 함수에 대해 알아보자.

parent 함수 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    // child_class에서 부모 요소 rootId 찾기
    const childClass = $('.child_class').parent('#rootId').attr('class');
    console.log(childClass);
});
</script>

<div>
    <div id="rootId" class="root_class">
        <span>Parent</span>
        <hr>
        <input type="text" class="input_class_01" value="안녕하세요."/>
        <div class="child_class">
            <span id="childId01">반갑습니다.</span>
            <br>
            <span id="childId02">산코디입니다.</span>
        </div>
    </div>
</div>

위의 소스 코드는 child_class에서 부모 요소인 div #rootId의 class 정보를 가져오는 예제다.
children() 함수와 반대로 자식 요소에서 부모 요소를 찾아가는 기능이다. parent() 함수도 마찬가지로 한 레벨씩 올라가면서 부모를 찾아야 한다.

// 좋은 예 (자식 요소에서 1 레벨 상위 부모 요소 찾기)
$('.child_class').parent('#rootId').attr('class');
// 안 좋은 예 (자식 요소에서 1 레벨 건너뛰고 상위 부모 요소 찾기)
$('#childId01').parent('#rootId').attr('class');
// 좋은 예 (자식 요소에서 1 레벨 찾고 2 레벨 부모 요소 찾기)
$('#childId01').parent('.child_class').parent('#rootId').attr('class');

실행 결과


parent() 함수 역시 children() 함수와 마찬가지로 1 레벨 이상 요소를 찾아야 하는 경우에는 코드가 길어지고 가독성이 떨어지는 단점이 있다. 


다음은 children() 함수와 parent() 함수를 함께 응용한 예제를 정리해 보자.

반응형

children과 parent의 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    // span#childId01에서 부모 요소 div.child_class 찾은 다음 자식요소 span#childId02 찾기
    const childClass = $('#childId01').parent('.child_class').children('#childId02').text();
    console.log(childClass);
});
</script>

<div>
    <div id="rootId" class="root_class">
        <span>Parent</span>
        <hr>
        <input type="text" class="input_class_01" value="안녕하세요."/>
        <div class="child_class">
            <span id="childId01">반갑습니다.</span>
            <br>
            <span id="childId02">산코디입니다.</span>
        </div>
    </div>
</div>

자식 요소에서 다른 위치에 있는 형제 요소를 찾아가는 예제다.

$('#childId01').parent('.child_class').children('#childId02').text();

실행 결과



위의 코드와 같이 chain 방식으로 여러 단계를 찾아가다 보면 형제 요소를 찾을 수 있다. 형제 요소를 찾는 것 또한 한 번에 여러 레벨을 건너뛰는 것은 불가능하다. 요소가 많고 복잡한 경우에는 위의 방법은 상당히 길고 가독성도 좋지 않다.

children과 parent 함수 사용 시 주의사항

children과 parent 함수를 사용할 때에는 몇 가지 주의사항이 있다.

children

직계 자식 요소만 선택
children 함수는 해당 요소의 직계 자식 요소만 선택한다. 따라서 해당 요소의 자손 요소를 모두 선택하려면 find() 함수를 활용하는 것이 좋다.
특정 클래스 또는 태그 선택
클래스 또는 태그 이름과 함께 사용할 때에는 유용하지만, 선택 범위가 한정적이기 때문에 필요에 따라 더 유연한 선택자를 고려해야 한다.
동적으로 생성된 요소에 적용
동적으로 생성된 요소에는 children 함수가 적용되지 않을 수 있다. 이러한 경우에는 이벤트 위임 또는 다른 방법을 사용하여 요소를 탐색해야 한다.


parent

단일 부모 요소 선택
parent 함수는 해당 요소의 부모 요소 중 첫 번째 부모 요소만 선택한다. 따라서 여러 부모 요소를 선택하려면 closest 함수를 사용해야 한다.
최상위 요소에 적용
최상위 요소에 parent 함수를 적용하면 해당 요소 자체를 반환한다. 이는 원하지 않는 결과를 초래할 수 있으므로 주의해야 한다.
동적으로 생성된 요소에 적용
동적으로 생성된 요소에는 parent 함수가 적용되지 않을 수 있다. 이 경우에는 이벤트 위임 또는 다른 방법을 사용하여 요소를 탐색해야 한다.

children과 parent 함수는 DOM 요소를 탐색하고 조작하는 데 유용하지만, 사용할 때 주의해야 할 점이 있으며, 요구 사항과 상황에 맞게 적절히 사용하여 원하는 기능을 구현하는 것이 중요하다.

마무리


오늘은 이렇게 jQuery의 children 함수와 parent 함수에 대해 정리해 봤다. 화면 개발을 하면서 DOM 객체를 다루는 일은 정말 중요한 부분이고 프로그래밍에 있어서 부모 자식 요소를 다루는 것 또한 중요하다고 생각한다. 오늘 예제를 통해 알아본 두 함수와 다음에 포스팅할 find(), closest()를 같이 응용한다면 조금 더 수월하게 DOM 객체를 다룰 수 있다.

반응형

'javascript > jQuery' 카테고리의 다른 글

jQuery .empty() .remove() (DOM 삭제하기)  (0) 2023.01.03
jQuery 태그 요소를 조회하는 closest(), find() 함수를 알아보자  (0) 2023.01.02
[jQuery] .append() .prepend() 알아보자!  (0) 2022.12.31
jQuery show() hide() 이벤트 배워보기!  (0) 2022.12.30
jQuery click 이벤트의 개념과 활용방법 알아보기  (0) 2022.12.28

관련글

티스토리툴바