SeouliteLab

jQuery의 반복문 - for 문 활용하기 본문

프로그래밍

jQuery의 반복문 - for 문 활용하기

Seoulite Lab 2024. 3. 26. 15:25

jQuery에서 반복문을 사용하는 방법에 대해 알아보겠습니다. 반복문을 효과적으로 활용하면 동일한 작업을 반복해서 수행할 수 있어서 코드의 가독성을 높이고 작업을 간편하게 할 수 있습니다. 아래에서는 jQuery의 for 반복문을 사용하는 예제와 함께 설명하겠습니다.

설정

특별한 설정이 필요하지 않습니다. jQuery 라이브러리가 포함된 HTML 파일을 작성하면 됩니다.

예제 1: 배열 요소 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 반복문 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul id="myList"></ul>

<script>
    // 배열 선언
    var fruits = ["Apple", "Banana", "Orange"];

    // for 반복문을 통해 배열 요소를 출력
    for (var i = 0; i < fruits.length; i++) {
        $("#myList").append("<li>" + fruits[i] + "</li>");
    }
</script>

</body>
</html>

출력 결과:

- Apple
- Banana
- Orange

위 예제는 배열에 저장된 과일을 <ul> 요소에 리스트 형태로 출력하는 예제입니다. for 반복문을 사용하여 배열의 각 요소를 순회하고, jQuery의 append() 함수를 통해 리스트 아이템(<li>)을 추가합니다.

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

'프로그래밍' 카테고리의 다른 글

jQuery의 click 이벤트 핸들러 활용하기  (0) 2024.03.27
jQuery의 .css() 메서드를 활용하여 요소 스타일 변경하기  (0) 2024.03.26
jQuery를 사용한 HTML 요소 동적 추가 - append 메서드  (0) 2024.03.26
jQuery를 사용한 input 태그 값 가져오기와 alert 창 표시 예제  (0) 2024.03.26
jQuery를 사용한 input 태그 placeholder 변경 예제  (0) 2024.03.26
'프로그래밍' Related Articles more