[jQuery] 엘리먼트의 속성값을 array로 가져오는 방법

<ul>
	<li itemid='a'>아이템1</li>
	<li itemid='b'>아이템2</li>
<ul>

jQuery에서 Selector를 통해 dom element를 가져오게되면 하나의 element를 가져오던, 여러개의 element를 가져오던간에 항상 array형태로 돌려주게 된다. 예를 들어 $("li") 를 셀렉트 하면 jQuery는 Array 형태로 선택된 엘리먼트를 리턴해 주게 된다. 만약 이때 li의 속성으로 들어가 있는 itemid의 리스트를 가져오려면 어떻게 해야 할까?

$("li").attr("itemid")

로 속성값을 array로 받을 수 있을것 같지만 첫번째 검색된 엘리먼트의 itemid 속성을 리턴해 준다. 그러면 다른 방법으로

var tempArray = new Array();
$("li").each(function(){
	tempArray.push($(this).attr("id"));
});

정도로 코딩할수 있겠다. 위에서 사용한 each는 loop문으로서 검색된 li를 한번씩 돌면서 하나하나씩 데이터를 가져오는 방식으로 그닥 효율성 있게 보이지 않는다. 그래서 jQuery에서 지원하는 method인 $.map과 $.makeArray를 통해 선택된 속성의 값을 array형태로 가져와 보겠다. (상세한 method설명은 위의 링크에서 확인하자) 간단히 말해 $.map은 array나 object를 새로운 array로 만들어 주는것이고,  $.makeArray는 배열처럼보이는 object를 실제 JavaScript Array형태로 만들어 주는 method이다. 위의 두개의 method를 가지고 li 속성값을 array형태로 가져오려면 다음과 같이 하면 된다.

var itemids = $.makeArray($("li").map(function(){
	return $(this).attr("itemid");
}));

위 내용처럼 map으로 선택된 엘리먼트의 속성을 가져와 array형태로 만들고 이 array를 javascript native array로 만들기 위해 makeArray를 사용하여 변환하였다.