[jQuery] 제이쿼리 '선택' 메서드

 

jQuery에는 '선택'과 '동작'이 있고, '선택'을 위한 방법으로 CSS 선택자를 알아보았었다

▶CSS 선택자(Selector), 요소 선택하기 [글 바로가기]

 

하지만 이 외에도 jQuery에서 제공하는 '선택' 방법이 있다

 

 

 

filter

$('button').filter('.color-3').text('SELECTED!');

filter()는 ( ) 안의 조건으로 선택된 요소를 한번 더 걸러준다

위 코드의 경우, 모든 button 태그들 중에 color-3 클래스를 가지고 있는 요소만 추려내서 text를 바꿔주라는 의미이다

아래 script 코드의 결과를 살펴보면

box-1에서는 filter없이 모든 요소에 text가 적용되었고

box-2에서는 filter를 한 번 거친 후 text가 적용되었다

 

See the Pen Untitled by HyerinKim (@blogerin) on CodePen.

 

 

not

$('button').not('.color-3').text('SELECTED!');

not()은 filter()의 반대이다

선택된 요소 중에서 조건에 해당되는 것들을 제외시킨다

위 코드의 경우, 모든 button 태그들 중에 color-3 클래스를 가지고 있는 요소만 제외하고 text를 바꿔주라는 의미이다

아래 script 코드의 결과를 살펴보면

box-1에서는 not없이 모든 요소에 text가 적용되었고

box-2에서는 not을 한 번 거친 후 text가 적용되었다

 

See the Pen Untitled by HyerinKim (@blogerin) on CodePen.

 

 

eq

$('button').eq(1).text('SELECTED!');

eq()는 선택된 요소들 중에서 n번째 요소 하나만 골라낸다

eq() 안에 들어가는 숫자는 0부터 시작하기 때문에, 1일 경우 두 번째 요소를 나타낸다

따라서 위 코드는 모든 button 태그들 중에 두 번째 요소만 골라서 text를 바꿔주라는 의미이다

아래 script 코드의 결과를 살펴보면

box-1에서는 선택된 모든 요소에 text가 적용되었고

box-2에서는 선택된 요소 중 첫 번째 요소에만 text가 적용되었다

 

See the Pen Untitled by HyerinKim (@blogerin) on CodePen.

 

 

parent

$('#btn-1').parent().css('background-color', 'black');

parent()는 부모 요소를 찾아준다

위 코드의 경우, btn-1의 부모 요소에 css를 적용해 준다

아래 script 코드의 결과를 살펴보면

box-1에서는 .color-1 자기 자신에 css가 적용되었고

box-2에서는 .color-1의 부모 요소에 css가 적용되었다

 

See the Pen parent by HyerinKim (@blogerin) on CodePen.

 

 

children

$('#box-1').children().css('background-color', 'black');

children()은 parent()의 반대이다. 선택된 요소의 자녀 요소를 모두 골라준다

위 코드의 경우, box-1의 모든 자녀 요소에 css를 적용해준다

() 안에 조건을 넣을 경우, filter 역할도 함께 해 준다

아래 script 코드의 결과를 살펴보면

box-1에서는 box 자체에 css가 적용되었고

box-2에서는 box의 자식 요소들에 css가 적용되었다

box-3에서는 특정 조건에 맞는 자식 요소에만 css가 적용된다

 

See the Pen children by HyerinKim (@blogerin) on CodePen.

 

 

find

$('#box-1').find('.color-2').css('background-color', 'black');

find()는 선택된 요소의 자녀, 자녀의 자녀,... 를 골라주되, 조건에 맞는 요소만 골라서 찾아준다

위 코드는 box-1의 자녀 요소 중 color-2 클래스가 있는 요소에 css를 적용해준다

children()은 한 단계 아래의 자녀(직속 자녀)만 찾아주는 반면,

find()는 자녀의 자녀의 자녀들까지 그 이하는 모두 찾아낸다는 차이가 있다

아래 script 코드의 결과를 살펴보면

box-1에서는 box 자체에 css가 적용되었고

box-2에서는 특정 조건에 맞는 자식 요소에만 css가 적용되었다

 

See the Pen find by HyerinKim (@blogerin) on CodePen.

 

 

siblings

$('#btn-1').siblings().text('SELECTED!');

siblings()는 선택된 요소의 이웃 요소들을 골라준다

위 코드에서는 btn-1의 모든 이웃 요소에 text를 변경해준다

() 안에 조건을 넣을 경우, filter역할도 함께 해준다

아래 script 코드의 결과를 살펴보면

box-1에서는 .color-2 자기 자신에 css가 적용되었고

box-2에서는 .color-2의 모든 이웃 요소에 css가 적용되었다

box-3에서는 .color-2의 모든 이웃 요소 중 조건에 맞는 요소에만 css가 적용되었다

 

See the Pen siblings by HyerinKim (@blogerin) on CodePen.