Java Script/jQuery

[Java Script] jQuery / children, parent

웹개발자(진) 2024. 4. 26. 20:33
반응형
잡담

아직 날짜상으로는 봄인데 벌써 여름처럼 덥네요. 오늘 최고기온이 27도까지 올라갔습니다. UI 수업시간에 ajax를 통해서 jason 데이터들을 가져오는 작업들을 해봤는데 게시글 밀린 게 많아서.. 곧 올라가지 않을까 싶습니다. 오늘은 jquery의 기본 중에 children, parent를 배워보도록 하겠습니다.

 

1. children

jQuery의 .children() 메서드는 선택한 요소의 모든 직계 자식 요소를 선택하는 데 사용됩니다. 이를 통해 DOM 트리를 아래로 탐색하여 선택한 요소의 즉시 자식 요소를 찾을 수 있습니다. 간단한 예제를 살펴보겠습니다.

// 다음과 같은 HTML 구조가 있다고 가정해보겠습니다:
/*
<div id="parent">
    <div class="child">자식 1</div>
    <div class="child">자식 2</div>
    <div class="child">자식 3</div>
</div>
*/

// 다음과 같이 부모 요소의 모든 즉시 자식을 선택할 수 있습니다:
var children = $('#parent').children();

// 이렇게 하면 모든 즉시 자식을 포함하는 배열 형태의 jQuery 객체가 반환됩니다.
// 그런 다음 이러한 자식에 대해 작업을 수행할 수 있습니다. 예를 들어, 반복하거나 CSS 스타일을 적용할 수 있습니다.

// 예를 들어, 반복하여 CSS 클래스를 추가하는 경우:
children.each(function() {
    $(this).addClass('highlight');
});

이 예제에서 children은 ID가 "parent"인 요소의 모든 즉시 자식 요소를 포함하고 있습니다. 이는 "child" 클래스를 가진 세 개의 <div> 요소입니다. 그런 다음 each() 메서드를 사용하여 각 자식에 대해 반복하고, 이들에게 CSS 클래스 "highlight"를 추가합니다.

예제

 

1. JavaScript 와 jQuery 비교

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#my-ul").children().css("backgroundColor","blue")
            //my-ul의 모든자식에 배경색깔 파란색
        })
    </script>
</head>
<body>
    <ul id="my-ul">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
        <li>리스트5</li>
        <li>리스트6</li>
        <li>리스트7</li>
    </ul>
</body>
</html>

See the Pen jquery children1 by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //$("#my-ul").children().css("backgroundColor","blue")
            //my-ul의 모든자식에 배경색깔 파란색
            var myUl=document.getElementById("my-ul")
            var len=myUl.children.length
            for(var i=0; i<len; i++){
                myUl.children[i].style.backgroundColor='blue';
            }
        })
    </script>
</head>
<body>
    <ul id="my-ul">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
        <li>리스트5</li>
        <li>리스트6</li>
        <li>리스트7</li>
    </ul>
</body>
</html>

See the Pen jQuery children2 by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

 

 

두 코드가 같은 작업을 한다는 것을 알 수 있다.

2. 특정 children에 접근

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#my-ul").children("li:eq(1)").css("backgroundColor","blue")
            //children메서드 입력 안주면 모든 자식 접근
            //children메서드 입력 주면 특정 자식 접근
            //메소드 오버로딩
            //my-ul의 모든자식에 배경색깔 파란색
            /*
            var myUl=document.getElementById("my-ul")
            var len=myUl.children.length
            for(var i=0; i<len; i++){
                myUl.children[i].style.backgroundColor='blue';
            }
            */
        })
    </script>
</head>
<body>
    <ul id="my-ul">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
        <li>리스트5</li>
        <li>리스트6</li>
        <li>리스트7</li>
    </ul>
</body>
</html>

See the Pen jQuery children3 by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

 

 

2. parent

jQuery의. parent() 메서드는 선택한 요소의 부모 요소를 선택하는 데 사용됩니다. 이 메서드는 DOM 트리에서 한 단계 위로 이동하여 선택한 요소의 부모 요소를 찾습니다. 아래는 간단한 예제입니다.

// 다음과 같은 HTML 구조가 있다고 가정해보겠습니다:
/*
<div id="parent">
    <div class="child">자식</div>
</div>
*/

// 자식 요소에 대한 부모 요소를 선택하는 예제:
var parent = $('.child').parent();

// 이렇게 하면 자식 요소의 부모 요소가 선택됩니다.
// parent 변수에는 부모 요소에 대한 jQuery 객체가 포함됩니다.

이 예제에서는 클래스가 "child"인 요소의 부모 요소를 선택합니다. 선택된 부모 요소는 ID가 "parent"인 <div>입니다. 결과적으로 parent 변수에는 부모 요소에 대한 jQuery 객체가 포함됩니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //$("#my-ul").children("li:eq(1)").css("backgroundColor","blue")
            $("#li2").parent().css("backgroundColor","red")
            //li2의 부모 요소 1개 선택
            //parent()-부모1개, parents()-부모 모두, parentsUntil()-부모 중에서 어디까지
        })
    </script>
</head>
<body>
    <ul id="my-ul">
        <li>리스트1</li>
        <li id="li2">리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
        <li>리스트5</li>
        <li>리스트6</li>
        <li>리스트7</li>
    </ul>
</body>
</html>

See the Pen jQuery parent by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

 

글을 마치며

오늘은 jquery의 기본인 children과 parent에 대해 알아보았습니다. 문자 그대로 자식과 부모의 관계를 가지고 있습니다. 글로 설명하는 것보다 예제로 설명하는 게 더 이해하기 좋을 것 같아서 예제를 많이 준비했습니다. 감사합니다.

반응형
저작자표시 비영리 변경금지

'Java Script > jQuery' 카테고리의 다른 글

[Java Script] jQuery 사용법  (0) 2024.04.26
[Java Script] jQuery / even, odd, lt, gt, eq  (1) 2024.04.26
[Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings  (0) 2024.04.26
[Java Script] jQuery / ready  (0) 2024.04.24
[Java Script] jQuery / CSS  (0) 2024.04.24

'Java Script/jQuery'의 다른글

  • 현재글[Java Script] jQuery / children, parent

관련글

티스토리툴바