본문 바로가기
개발/jQuery

jQuery (제이쿼리) - jQuery each

by 루 프란체 2018. 5. 28.

제이쿼리에서는 each 라는 함수를 제공한다.

보통은 for 문 대신 사용한다고 하는데 내가 보기엔 while(hasNext) 와 비슷하지 않나 싶다.


사용하는 방법에는 여러 가지가 있는데 그 중 몇 가지를 살펴보자.

$(function() {
	var result = "";
    $("p").each(function() {
    	result += $(this).html() + "\n";
    })
    alert(result);
    
    result = "";
    $.each($("p"), function() {
    	result += $(this).html() + "\n";
    });
    alert(result);
    
    result = "";
    var pElem = $("p");
    $.each(pElem, function(i) {
    	result += i + " : " + pElem.html() + "\n";
    });
    alert(result);

	result = "";
    $("p").each(function(i, pElem) {
        result += i + " : " + pElem.innerHTML + "\n";
    });
    alert(result);
})

First Element

Second Element

Third Element

위의 네 코드는 약간씩 다르지만 전부 동일한 결과를 나타낸다.


단지 세 번째, 네 번째 코드에는 i 를 파라미터로 받고 있는데 이것은 pElem 에서 꺼내오는 현재 객체의 배열 내 인덱스를 의미한다.

배열 인덱스가 으레 그러하듯이 0 부터 시작해서 1 씩 증가하며 이 인덱스를 통해 each 문 내에서 특정 배열의 값만 꺼내올 수는 없다.


또한 첫 번째, 두 번째 코드에서는 this 라는 구문을 발견할 수 있는데 이것은 현재 선택된 객체를 뜻하는 예약어이며 

사실 이것은 제이쿼리에서 제공하는 것이 아니라 자바스크립트에서 기본적으로 사용하는 예약어이다.


그렇기 때문에 이 this 라는 예약어를 통해 객체를 선택하게 되면 HTML 객체로 인식하게 되어 제이쿼리 함수를 사용하기 위해서는

$(this) 를 통해 HTML 객체를 제이쿼리 객체로 바꿔줄 필요가 있다.


this 예약어를 사용하지 않고 배열로 가져온 객체들을 사용하기 위해서는 세 번째, 네 번째 코드처럼 해당 배열에서 꺼내오는 객체를

명시적으로 지정해주어야만 this 를 사용하지 않고 해당 객체를 사용할 수 있다.

댓글