jQuery (제이쿼리) - jQuery get(), toArray()

제이쿼리 함수 중 get() 이라는 함수가 있다. 이 함수는 사실 그렇게 많이 사용한 경우가 없었는데... 라기보다

사용한 적이 없었는데 그래도 다른 솔루션에 보면 많이 있는 것 같아서 알아두면 유용한 함수이니 알아두고 넘어가도록 하자.

기본적인 사용 문법은 다음과 같다.

$("p").get(); - 선택자.get();
$("p").get(2); - 선택자.get(index);

너무나도 단순해서 사용 문법에 대해서는 더 설명을 할 수가 없다.

그렇다면 단순히 선택자를 사용해서 선택하는 것과 get() 을 사용하는 것의 차이점은 뭘까?

바로 그 차이점은 앞선 포스팅에서 지긋지긋하게도 말했던 제이쿼리 객체와 HTML 객체에 있다.

get() 함수는 선택자로 선택된 엘리먼트들을 HTML 객체 배열로 리턴을 해준다.

이게 무슨 쓸모가 있냐? 무슨 차이가 있냐? 라고 궁금해 하시는 분들이 있을텐데 여러 솔루션을 사용하다 보면 

어떤 것은 제이쿼리를 기반으로 만들어진 것이 있고 또 어떤 것은 단순 자바스크립트를 기반으로 해서 만들어진 것이 있다.

그런데 내가 개발하는 곳이 제이쿼리 환경이라고 해서 무조건 제이쿼리를 기반으로 만들어진 솔루션만 사용한다는 보장이 없기 때문에

언제든 HTML 객체를 넘길 준비가 되어 있어야 하는 것이다. 바로 그럴 때 사용하면 아주 유용한 함수이다.

그럼 다음 소스를 한 번 보자.

    
룩셈부르크
    
대한민국
    
일본
    
러시아
    
중국
    
미국
    
북한
    
가나
    
아프리카




$(function() {
	var oElem = $("ol#countryList > li").get();
    //역순정렬은 reverse() 를 사용한다.
    //var oElem = $("ol#countryList > li").get().reverse();
    var cElem = $("#copyList");
    
    $.each(oElem, function(i, el) {
    	cElem.append("
" + el.innerHTML + "
")
    });
});

위 소스는 countryList 를 ID 로 갖는 오더 리스트에서 copyList 를 ID 로 갖는 오더 리스트로 내용을 복사하는 소스다.

each 구문 내의 append() 함수를 보면 html() 함수가 아닌 el.innerHTML 를 사용한 것을 볼 수 있다. 

즉, 위에서 설명한 것처럼 get() 함수는 제이쿼리 객체가 아닌 HTML 객체를 배열로 넘겨준다는 의미가 된다.

참고로 append() 함수는 HTML 객체든 제이쿼리 객체든 뭐가 됐든 넘어오면 다 받아준다. -_-

위의 소스는 toArray() 함수를 사용해서 다음과 같이 표현도 가능하다.

    
룩셈부르크
    
대한민국
    
일본
    
러시아
    
중국
    
미국
    
북한
    
가나
    
아프리카




$(function() {
	var oElem = $("ol#countryList > li").toArray();
    var cElem = $("#copyList");
    
    $.each(oElem, function(i, el) {
    	cElem.append("
" + el.innerHTML + "
")
    });
});

toArray() 함수와 get() 함수의 차이점은 get() 함수는 INDEX 를 사용해 배열에서 값을 꺼내올 수 있는 반면에

toArray() 함수는 지정된 선택자로 선택된 모든 것을 단순히 배열로 넘긴다는 차이점 외에는 없는 것 같다. 끝!