[Jquery] $.each() - 요소 각각에 대하여 함수 실행

   

 

이번 글에서는 반복함수를 실행시키는 메소드라고 불리는 each() 메소드에 대하여 알아보도록 하겠습니다.

 

$.each() 메소드

객체나 배열에서 모두 사용할 수 있는 반복 함수(iterator function)입니다.

 

length 속성이 있는 배열 혹은 그 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행합니다.

만약, 객체인 경우 객체가 갖고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행합니다.

 

글만 봐서는 이해가 잘 안되실 수 있으니 예제를 통하여 확인해보도록 하겠습니다.

아래 소스는 $.each() 메소드에 인수값을 배열로 전달하여 각 배열의 요소를 출력하는 예제입니다.

<script>
    $(function() {
        $("button").on("click", function() {
            $.each([1, true, "JQUERY"], function(index, value) {
                $("#text").append("배열의 " + (index + 1) + "번째 요소는 " + value + "입니다. <br>");
            })
        })
    })
</script>

 

 

이번에는 배열이 아닌 객체를 인수로 전달한 예제를 확인해보도록 하겠습니다.

<script>
    var dog = {
        name: "하얀",
        family: "강아지",
        age: 13
    }

    $(function() {
        $("button").on("click", function() {
            $.each(dog, function(key,value) {
                $("#text").append("해당 객체의 " + key + " 프로퍼티의 값은 " + value + "입니다. <br>")
            })
        })
    })
</script>

 

출력 결과가 어떻게 나올까요?

아마도 각 프로퍼티가 출력될 것입니다.