[jQuery] Add함수를 이용한 확장집합 만들기

확장된 엘리먼트 집합이 있으면 새로운 엘리먼트를 추가해 이것을 증가시킬 수도 이쏙, 일치하는 원본 엘리먼트의 부분 집합으로 축소시킬 수도 있다. jQuery는 확장 엘리먼트의 집합을 관리하는 일련의 메소드를 지원한다.

1) 확장 집합에 다른 엘리먼트 추가하기

예를 들어 alt나 title 어트리뷰트를 가진 모든 <img> 엘리먼트를 일치시키려고 한다.

jQuery에는 이  요구사항을 셀렉터 하나로 표현할 수 있다.

$(‘img[alt], img[title]’)

하지만 add() 메소드를 사용하여도 똑같은 확장 엘리먼트를 만들 수 있다.

$(‘img[alt]’).add(‘img[title]’)

이와 같은 방식으로 add() 메소드를 사용하면 많은 셀렉터를 체인으로 연결해서 논리합(or) 관계를 형성하게 된다. 논리합 관계는 양쪽 셀렉터를 모두 만족하는 엘리먼트의 결합을 생성한다. add()와 같은 메서드를 사용하는 방식은 셀렉터 하나를 이용하는 것보다 유용할 수 있다. 이유는 end() 메서드를 사용하면 add() 메서드를 통해 엘리먼트를 추가하기 전으로 돌아갈 수 있기 때문이다.

add() 메서드는 이미 존재하는 엘리먼트를 확장 집합에 추가할 뿐 아니라 HTML 마크업을 전달하여 새로운 엘리먼트도 추가할 수 있다.

$(‘p’).add(‘<div> Hello!</div>’)

이와 같이 하면 모든 <p> 엘리먼트의 확장 집합을 생성한 후 새로운 <div>를 생성해서 확장 집합에 추가한다.

add(expression) expression :  매개변수로 명시한 엘리먼트를 확장 집합에 추가한다. 표현식에는 selector, HTML 코드, DOM 엘리먼트, DOM 엘리먼트의 배열이 올 수 있다.

매개변수 expression : (String | Element | Array) 확장 집합에 추가될 대상을 명시한다. jQuery 셀렉터도 매개변수가 될 수 있다. 이 경우에 셀렉터에 일치하는 엘리먼트가 집합에 추가된다. HTML 코드가 전달되면 적합한 엘리먼트가 생성되어 집합에 추가된다. DOM 엘리먼트나 DOM 엘리먼트의 배열인 경우 집합에 추가도니다.

반환값 확장집합

Colored By Color Scripter™

1 2 3 4 5 6 7

add: function( selector, context ) {        return this.pushStack(            jQuery.unique(                jQuery.merge( this.get(), jQuery( selector, context ) )            )        );    }

위에서도 잠깐 나온 end()를 위해 pushStack을 사용하였고 this의 엘리먼트 배열과 add할 확장 엘리먼트를 합친후에 동일한 것을 제외하고 반환한다.