웹개발 교육/jQuery

[42일] jQuery (6) - 반복문

ewok 2022. 9. 26. 15:58

JavaScript, Java에서는 반복문으로 for을 사용했다. jQuery에서는 each도 사용할 수 있다.

 

jQuery의 each 반복문
형식) $.each(배열, function(){})
형식) $(배열).each(function(){})
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>06_each반복문.html</title>
        <!-- jQuery import -->
        <script src="jquery-3.6.1.min.js"></script>
        <style>
            #displayList {
                margin: 20px;
                width: 400px;
                height: 300px;
                background: #81d4fa;
                padding: 20px;
                list-style: none;
            }
        </style>
    </head>  
    <body>

        <h3>each반복문</h3>
        <button id="startBtn">7단!</button>
        <ul id="displayList"></ul>

        <script>

            $("#startBtn").click(function(){
                let dan = 7;
                for(i=1; i<=9; i++){
                    //$("li")  <body>에 있는 요소들 중에서 <li>요소에 접근
                    //$(<li>)  <body>에 새로운 <li>요소를 생성
                    $("<li>").text(dan+"*"+i+"="+(dan*i)).appendTo("#displayList");
                }//for end

                $("li").each(function(){
                    let result = $(this).text();
                    alert(result);
                }); //each() end
            }); //click end

        </script>
        
    </body>
</html>
$("li").each(function(){
    let result = $(this).text();
    alert(result);
}); //each() end

function 안의 코드를 반복한다.

 

 

https://www.w3schools.com/jquery/misc_each.asp

 

jQuery Misc each() Method

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com