[JAVASCRIPT/자바스크립트] Loop

Rolen 2022. 12. 6. 20:47

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Event</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        // 웹 페이지를 모두 불러오면
        $(document).ready(function () {
            // h1 태그를 모두 추출하고 반복을 돌려
            $('h1').each(function (index, element) { // element는 해당 index 내부의 값
                // 특정 위치에서
                if (index % 2 == 1) {
                    // 배경 색상을 적용합니다.
                    $(this).css('backgroundColor', 'red'); // 문제예시 : index가 1일 경우의 $(this)는? 
                }
            });
        });
    </script>
</head>
<body>
    <h1>HeaderA</h1>
    <h1>HeaderB</h1>
    <h1>HeaderC</h1>
    <h1>HeaderD</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Event</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        // 웹 페이지를 모두 불러오면
        $(document).ready(function () {
            // h1 태그를 모두 추출하고
            var $headers = $('h1');
            // h1 태그의 개수만큼 반복을 돌려서
            for (var i = 0; i < $headers.length; i++) {
                // 특정 위치에서
                if (i % 2 == 1) {
                    // i번째 요소를 추출해
                    var domElement = $headers.get(i);
                    // get()은 jquery 객체가 아닌 일반 문서 객체로 값을 반환 받는다.
                    // 배경 색상을 적용합니다.
                    $(domElement).css('backgroundColor', 'red');
                    // 일반 객체인 domElement를 $()를 통해 jquery객체로 변환한 후
                    // css()를 이용하였다.
                }
            }
        });
    </script>
</head>
<body>
    <h1>HeaderA</h1>
    <h1>HeaderB</h1>
    <h1>HeaderC</h1>
    <h1>HeaderD</h1>
</body>
</html>

728x90