투케이2K

34. (jquery/제이쿼리) 부모에 포함된 자식 children 확인 및 first , eq , last 특정 위치 자식 지정 , css 스타일 변경 실시 본문

Jquery

34. (jquery/제이쿼리) 부모에 포함된 자식 children 확인 및 first , eq , last 특정 위치 자식 지정 , css 스타일 변경 실시

투케이2K 2021. 9. 5. 11:11

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : jquery

[소스 코드]

​

​

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. children : 부모에 포함된 자식을 지정할 때 사용합니다
        3. first : 부모에 포함된 첫번째 자식을 지정합니다
        4. children('요소:eq(인덱스)') : 부모에 포함된 특정 요소 (div , li ..) 에서 특정 인덱스를 지정합니다
        5. last : 부모에 포함된 마지막 자식을 지정합니다        
        */



        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window onload] : [start]");
            console.log("");

            // 이벤트 수행 함수 호출
            runFunction();
        };



        /* [이벤트 함수 수행 실시] */
        function runFunction(){
            console.log("");
            console.log("[runFunction] : [start]");
            console.log("");

            // 먼저 부모 객체를 지정합니다
            var parentID = $("#parent_container");

            // 부모에 포함된 자식 개수를 확인합니다
            var parentCHILD = parentID.children().length;
            console.log("");
            console.log("[runFunction] : [parentCHILD] : " + parentCHILD);
            console.log("");

            // 부모에 포함된 자식 전체 스타일을 지정합니다
            parentID.children().css({"border": "1px solid #ffffff", "background-color": "#000000"});

            // 부모에 포함된 첫번째 자식 스타일을 지정합니다
            parentID.children().first().css("background-color", "#ff00ff"); // 자주색


            // 부모에 포함된 특정 인덱스 자식 스타일을 지정합니다 (부모에 포함된 div 2번째 인덱스 지정)
            parentID.children('div:eq(2)').css("background-color", "#0000ff"); // 파랑색


            // 부모에 포함된 마지작 자식 스타일을 지정합니다
            parentID.children().last().css("background-color", "#dddddd"); // 회색

        };
                
    </script>  










<!-- body div 지정 소스코드 -->
<body>

<!-- parent layout -->
<div id = "parent_container"
    style="width: 70%; height: 50%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 5%; left: 0%;">

    <!-- child layout -->
    <div id = "child_1_container"
        style="width: 100%; height: 25%; margin: 0 auto; padding: 0; background-color: #ffffff;
            float: top; position: relative; top: 0%; left: 0%;">
    </div>

    <!-- child layout -->
    <div id = "child_2_container"
        style="width: 100%; height: 25%; margin: 0 auto; padding: 0; background-color: #ffffff;
            float: top; position: relative; top: 0%; left: 0%;">
    </div>

    <!-- child layout -->
    <div id = "child_3_container"
        style="width: 100%; height: 25%; margin: 0 auto; padding: 0; background-color: #ffffff;
            float: top; position: relative; top: 0%; left: 0%;">
    </div>

    <!-- child layout -->
    <div id = "child_4_container"
        style="width: 100%; height: 25%; margin: 0 auto; padding: 0; background-color: #ffffff;
            float: top; position: relative; top: 0%; left: 0%;">
    </div>

</div>

</body>

[결과 출력]

​

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. children : 부모에 포함된 자식을 지정할 때 사용합니다

3. first : 부모에 포함된 첫번째 자식을 지정합니다

4. children('요소:eq(인덱스)') : 부모에 포함된 특정 요소 (div , li ..) 에서 특정 인덱스를 지정합니다

5. last : 부모에 포함된 마지막 자식을 지정합니다

*/

 

반응형
저작자표시

'Jquery' 카테고리의 다른 글

36. (jquery/제이쿼리) input text 텍스트 실시간 글자 입력 수 확인 실시  (0) 2022.04.20
35. (jquery/제이쿼리) 라디오 radio 주요 사용 정리 - 강제 활성 및 비활성 (checked true) , 체크 상태 확인 (is checked) , value 확인  (0) 2021.09.13
33. (jquery/제이쿼리) radio 라디오 버튼 그룹 강제 클릭 이벤트 및 선택한 value 값 확인  (0) 2021.08.19
32. (jquery/제이쿼리) get , set 데이터 호출 및 지정 실시 - text , html , val  (0) 2021.08.13
31. (jquery/제이쿼리) 체이닝 방식을 적용해 배경 색상 변경 및 애니메이션 효과 동시 적용 실시  (0) 2021.08.13
'Jquery' Related Articles more
Comments