제이쿼리 필터링

제이쿼리의 필터링 메소드는 이미 선택된 DOM 요소 집합에서 특정 조건을 만족하는 요소만 추가로 걸러내거나 제외하는 작업을 도와줍니다.

이 메소드들을 활용하면 요소를 매우 정밀하게 제어할 수 있어, 복잡한 DOM 조작이 필요한 웹사이트나 앱 개발 시 매우 유용합니다.

---

🔹 주요 필터링 메소드 요약표

메소드	설명	주 활용처
.first()	첫 번째 요소 선택	첫 요소 강조·스타일
.last()	마지막 요소 선택	리스트 끝 요소 처리
.eq()	특정 인덱스 요소 선택	인덱스 기반 작업
.filter()	조건에 맞는 요소만 선택	조건부 스타일링
.not()	조건에 맞지 않는 요소 선택	제외 요소 처리
.has()	특정 자손 요소를 가진 요소 선택	중첩된 구조 탐색
.is()	조건 만족 요소 존재 여부 확인	조건 검증
.map()	요소별 데이터 처리 후 새로운 집합 반환	데이터 수집 및 가공
.slice()	특정 인덱스 범위 선택	구간 선택 처리

---

🔸 메소드별 상세 예제와 설명

1️⃣ .first()와 .last()

• 첫 번째/마지막 요소를 간편하게 선택합니다.

$("li").first().css("border", "2px solid green");  // 첫 번째 요소만 선택
$("li").last().css("border", "2px solid orange");  // 마지막 요소만 선택

---

2️⃣ .eq() – 지정 인덱스 요소 선택

• 음수 인덱스로 뒤에서부터 선택 가능

$("li").eq(1).css("border", "2px solid blue");   // 두 번째 li
$("li").eq(-1).css("border", "2px solid red");   // 마지막 li

---

3️⃣ .filter() – 조건 만족 요소 선택

• 조건 선택자로 요소 세밀하게 필터링

$("li").filter(":odd").css("background", "#f3f3f3"); // 홀수 인덱스 li

---

4️⃣ .not() – 특정 조건 요소 제외 선택

• 조건과 맞지 않는 요소만을 선택할 때 유용

$("li").not(":first").css("opacity", "0.5");  // 첫 번째 제외 나머지 투명도 조정

---

5️⃣ .has() – 특정 자손 요소를 가진 요소 선택

• 특정 구조를 포함한 부모 요소 찾기

$("li").has("span").css("border", "2px dashed green"); // span이 있는 li만

---

6️⃣ .is() – 조건 만족 요소 존재 여부 확인

• 반환 값은 Boolean(true/false)

if ($("span").parents().is("ul")) {
    console.log("ul 요소가 있습니다.");
}

---

7️⃣ .map() – 요소 데이터 처리 후 새 집합 생성

• 데이터 추출 및 가공에 매우 유용

var ids = $("li").map(function() {
    return this.id;  // li 요소들의 id 반환
}).get().join(", ");

console.log(ids); // "id1, id2, id3"

---

8️⃣ .slice() – 인덱스 범위로 요소 선택

• 특정 범위 요소들만 선택할 때 유용

$("li").slice(1, 3).css("border", "2px solid purple");  // 2번째~3번째 요소만

---

🚩 실전 활용 예제: 필터링 메소드 조합하기

여러 메소드를 조합하여 강력한 필터링 가능

// 짝수 요소 중 첫 번째 제외, span을 자손으로 가진 li만 스타일 변경
$("li")
    .filter(":even")
    .not(":first")
    .has("span")
    .css("color", "blue");

• 복합 조건을 체이닝으로 처리해 가독성 ↑

---

🛠️ 필터링 메소드 활용 팁

• 인덱스 기반 선택: .eq(), .slice()는 페이징·슬라이더 제작 시 매우 효과적입니다.
• 조건 기반 처리: .filter()와 .not()을 활용하여 조건부 스타일링을 깔끔히 정리할 수 있습니다.
• 데이터 추출: .map()은 각 요소의 데이터 수집·재가공이 필요할 때 매우 유용합니다.

---

📌 질문 정리

질문	답변
.filter()와 CSS 선택자 차이는?	.filter()는 이미 선택된 요소 중 추가로 조건부 필터링 시 사용합니다.
.eq() 음수 인덱스의 기준은?	음수는 배열 끝에서부터 카운트합니다. -1은 마지막 요소를 의미합니다.
.map() 후 왜 .get()을 쓰나요?	.map()은 jQuery 객체를 반환하므로, 배열로 변환하려면 .get()을 사용합니다.
.is()와 .hasClass()의 차이는?	.hasClass()는 클래스만, .is()는 선택자 전체 조건을 확인합니다.
.slice()에서 종료 인덱스는 포함되나요?	종료 인덱스는 포함되지 않으며, 종료 인덱스 전까지의 요소를 반환합니다.