[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - filter)

jQuery - filter()

jQuery의 filter는 CSS 셀렉터로 DOM 트리를 제어했을 때에 감소하는 속도를 커버해주는 기능을 합니다.

jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .filter() 함수를 사용하면 선택된 요소들의 일부부을 추출하여 새로운 jQuery 객체를 생성합니다.

바로 예제를 가져와서 설명하도록 할게요

ul의 자식 태그인 li태그에서 짝수만 골라서 색을 변환시켜보는 코드를 짜보겠습니다.

결과를 보면 짝수 menu에 색이 적용된 것을 확인할 수 있습니다.

아니 짝수라면서요?? 왜 menu1부터 색이 들어가 있어요? 코드잘못짠거 아닌가요? 라고 생각하실 수 있는데요.

li 태그에 접근할 때 자바스크립트는 내부적으로 반복문을 돌리는데요. 그 반복문은 인덱스를 기준으로 실행이 된답니다. 자바스크립트를 공부해보셨으면 인덱스가 몇 부터 시작하는지 알고계시죠?? 

바로 인덱스 0부터 시작합니다. 그러므로 menu1은 인덱스 0로서 짝수가 됩니다.

이정도로 설명하면 이제 무슨 의미인지 잘 이해하셨을거라 생각됩니다 ㅎ

여기서 예시를 :even으로 들었지만, :odd와 같은 다양한 선택자를 이용해서 필터링을 하실 수 있습니다. (그래서 유용한겁니다)

함수를 사용한 방법

filter()함수를 사용하는 두번째 방법은 함수를 사용하는 것입니다. 이 방법은 선택자(selector)를 사용하는 것보다 좋은데요. 각 요소들에 대해 함수의 결과가 true라면 새로운 결과 집합에 포함시키고 false 라면 제외시켜 버립니다. 

(한마디로 조건문을 거는거랑 같네요. 매우 쓸모가 있어보입니다.)

예제를 통해서 쉽게 들어가 볼까요.

미션은 index가 3번째일 때마다 color를 적용시키는 것입니다.

결과를 보시면 index 3번째마다 색이 변한 것을 확인하실 수 있습니다. 이렇게 함수를 이용해서 조건을 걸어서 처리하는 방법도 있답니다.

한가지 실용적인 예제를 다뤄볼까요?

8개의 박스 중 border_box 클래스가 적용된 박스에만 4px에 red컬러를 가진 border를 적용해봅시다.

일단 HTML 마크업입니다.

HTML 마크업에 CSS로 보기 편하게 꾸며줍니다.

이렇게 마크업된 코드에 jQuery를 적용해봅니다.

짠!

이렇게 filter를 통해서 간단하게 구현할 수 있습니다.

filter를 잘 사용하면, 정말 효율성이 엄청난 함수입니다. 적절하게 filter를 사용해서 효율적인 코드를 생성해내는 개발자가 됩시다 !