jQuery에서 배열 요소 다루기

1. 배열로부터 jQuery 오브젝트 생성

$함수에 넣으면 OK

$([1,2,3])

$(document.getElementsByTagName("div")) // $("div")와 같음

2. jQuery를 활용하여 배열 처리

• 길이 조회

$("div").length // document.getElementsByTagName("div").length 와 같음

• 특정 인덱스의 요소를 취득

[] 이나 get(index)를 사용하면, 특정의 인덱스의 DOM 요소를 취득할 수 있음

$("div")[0];
$("div").get(0) // document.getElementsByTagName("div")[0]와 같음 

.eq를 사용하면, 특정의 인덱스의 요소만을 포함한 jQuery 오브젝트가 되돌아 옴

$("div").eq(0) // $(document.getElementsByTagName("div")[0]) 또는  $("div:first") 같음 . 

reverse 한 뒤에 한층 더 jQuery 오브젝트로 하려면, 모두에 소개한 것처럼,$()에 넣는다.

$($("div").get().reverse()) 

get()의 내부에서는 $.makeArray(this)가 실행되고 있음
$.makeArray()는 배열과 같은 것(NodeList나 arguments, jQuery 오브젝트 등)을 배열로 변환할 때 편리함

• jQuery 오브젝트로부터 배열을 작성

.each!(제일인수가 인덱스, 제2인수가 요소) 　

$("div").each(function(i, elem){
    elem.className="foo"+i;
}) 
// 이하의 코드와 같은 
// var elems = document.getElementsByTagName("div"); 
// for(var i = 0; i < elems.length; i++) 
// elems[i].className = "foo" + i; 

OR

$("div").each(function(){
    this.className = "foo";
}) 
// $("div").attr("className", "foo")와 같음 

.map!

$("div").map(function(){return this.className;}) 
// ["", "class1", "class2", ...] 
// (클래스명 일람을 포함한 jQuery 오브젝트) 

.filter!(인덱스 번호도 올수 있음)

$("div").filter(function(){ 
    return this.className == "foo"; 
}) 
// $("div.foo")와 같음 

OR

$("div").filter(function(i){ 
    return i % 2 == 0; 
}) 
// $("div:even")와 같음 

.filter 에는 CSS 실렉터도 사용할 수 있다.

$("div").filter(".foo")

.map과 filter를 한 후에 end()를 부르면, 원래의 jQuery오브젝트로 돌아옴

$("div")
    .filter(".foo")
    .style("display", "none")
    .end()
    .filter(".bar")
    .style("display", "block")
    .end() 
// 이하는 같음 
// $("div.foo").style("display", "none"); 
// $("div.bar").style("display", "none");