[Dseok의 코딩스터디] javascript & jquery .filter() 한방에 끝내기 | 특정 요소 선택 & 실전 활용법 7가지

📌 .filter()란?

jQuery.filter() 메서드는 선택한 요소 중 특정 조건을 만족하는 요소만 남기고 필터링할 때 사용됩니다. 주로 특정 클래스가 있는 요소만 선택, 특정 조건을 충족하는 리스트 항목 필터링 등에 활용됩니다.

✅ 기본 문법

$(selector).filter(criteria);

• criteria: 필터링할 기준 (CSS 선택자(".selecter"), 함수(funClick()), jQuery 객체("#selecter") 등 가능)
• 반환값: 조건을 만족하는 요소만 포함된 jQuery 객체

📌 .filter() 활용 예제 7가지

1️⃣ 특정 클래스가 있는 요소만 선택

$("div").filter(".active").css("background", "yellow");

✅ 설명: <div> 요소 중 .active 클래스를 가진 요소만 배경색을 노란색으로 변경합니다.

 

2️⃣ 짝수 번째 리스트 항목만 선택

$("li").filter(":even").css("color", "blue");

✅ 설명: <li> 요소 중 짝수 번째 요소(0부터 시작) 만 파란색으로 변경합니다.

 

3️⃣ 특정 텍스트를 포함한 요소 선택

$("p").filter(function() {
  return $(this).text().includes("jQuery");
}).css("font-weight", "bold");

✅ 설명: <p> 요소 중 jQuery라는 텍스트를 포함하는 요소만 글씨를 굵게 만듭니다.

 

4️⃣ 체크된 체크박스만 선택

$("input[type='checkbox']").filter(":checked").parent().css("background", "lightgray");

✅ 설명: 체크된 체크박스가 포함된 부모 요소에 배경색을 적용합니다.

 

5️⃣ 특정 속성 값을 가진 요소 선택

$("a").filter("[target='_blank']").css("color", "red");

✅ 설명: <a> 요소 중 target="_blank" 속성을 가진 요소만 빨간색으로 변경합니다.

 

6️⃣ 5개 이상의 글자를 가진 리스트 항목 선택

$("li").filter(function() {
  return $(this).text().length >= 5;
}).css("background", "lightblue");

✅ 설명: <li> 요소 중 텍스트 길이가 5글자 이상인 요소만 배경색을 변경합니다.

 

7️⃣ 특정 버튼을 제외하고 스타일 적용

$("button").not(".ignore").css("border", "2px solid green");

✅ 설명: .ignore 클래스를 가진 버튼을 제외한 나머지 버튼에 초록색 테두리를 적용합니다.

📌 마무리 🎯

• .filter()는 선택된 요소 중 특정 조건을 만족하는 요소만 필터링하는 데 사용됩니다.
• 특정 클래스, 짝수 요소, 속성 조건, 텍스트 포함 여부 등을 기준으로 요소를 필터링할 수 있습니다.
• .not()을 사용하면 특정 요소를 제외하여 스타일을 적용할 수도 있습니다.

🚀 이제 .filter()를 활용해 원하는 요소를 효과적으로 선택해 보세요!