[jQuery] .has()

jQuery의 .has()는 선택된 요소 집합 중에서 특정 자식을 포함하는 요소만 필터링하는 메서드입니다.

📌 문법

$(selector).has(selectorOrElement)

 

• selectorOrElement: 특정 자식 요소(selector) 또는 DOM 요소를 의미합니다.
• 반환값: 해당 자식 요소를 포함하고 있는 상위 요소만 반환하는 새로운 jQuery 객체입니다.

✅ 예제 1: 특정 자식 요소를 가진 부모 필터링

<ul>
  <li>Apple</li>
  <li><span>Banana</span></li>
  <li><span>Cherry</span></li>
</ul>

 

$('li').has('span').css('color', 'red');

📌 결과:

• <li> 요소 중 <span>을 자식으로 가지고 있는 요소만 빨간색으로 바뀜
• 즉, 2번째와 3번째 <li>만 선택됨

 

✅ 예제 2: 특정 DOM 요소가 자식으로 있는지 확인

<div id="parent1"><p id="child"></p></div>
<div id="parent2"></div>

$('#parent1, #parent2').has($('#child')).css('background', 'yellow');

📌 결과:

• #child를 포함하고 있는 #parent1만 배경색이 노란색으로 변경됨

⚠️ 주의

• .has()는 DOM 트리 내에 해당 요소가 "자식"으로 존재하는지를 확인합니다. "후손"까지 포함합니다.
• 만약 현재 요소 자체를 기준으로 비교하고 싶다면 .is()를 사용해야 합니다.