[js] closest() 주의사항 - name 속성 보다는 id나 class 사용하기

closest()의 동작 방식

• closest(selector)는 현재 요소부터 상위 요소를 탐색하여 가장 가까운 일치하는 요소를 반환합니다.
• 하지만 name 속성은 CSS 선택자가 아닌 속성(attribute) 이므로 closest("[name=${dsdKey}]")은 예상과 다르게 동작할 수 있습니다.

 

name 속성으로 closest()가 잘못 동작하는 이유

name 속성은 input, select, textarea 같은 폼 요소에서 주로 사용되며, closest()는 id나 class처럼 HTML 태그에서 직접 요소를 찾을 때 더 적합합니다.

 name 속성으로 closest()를 사용한 경우 (잘못된 코드)

<div class="wrapper">
    <button type="button" id="srch-custDivTp">버튼</button>
    <input type="hidden" name="custDivTp" value="">
</div>

const $target = $("#srch-custDivTp");
const $input = $target.closest("[name=custDivTp]");  // ❌ 실패 가능성 높음
console.log($input.length); // 0이 출력될 가능성이 있음

→ closest()는 상위 요소만 탐색하기 때문에, name 속성을 가진 <input>이 하위에 있으면 찾지 못함.

 

closest()를 사용할 때 적절한 예시

closest()는 상위 요소 중 특정 클래스를 가진 요소를 찾을 때 적합합니다.

✅ 적절한 사용 예: class를 이용한 closest()

<div class="parent">
    <div class="child">
        <button class="btn-select">클릭</button>
    </div>
</div>

const $target = $(".btn-select");
const $parent = $target.closest(".parent");  // ✅ 가장 가까운 `.parent` 찾기
console.log($parent.length); // 1 (정상 동작)