[생활코딩] jQuery 조회 범위 제한

Element 객체에서 getElementsBy* 메서드를 실행하면 조회의 범위가 그 객체의 하위 엘리먼트로 제한된다. jQuery에서는 어떻게 이러한 작업을 할 수 있을까?

 

Selector Context

가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것이다. 제한된 조회 범위를 jQuery에서는 Selector Context라고 한다.

다음과 같은 목록이 있다. 여기서 일부 엘리먼트만 CSS 적용을 하려고 한다.

<ul>
    <li class="marked">HTML</li>
    <li>CSS</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked">DOM</li>
            <li class="marked">BOM</li>
        </ul>
    </li>
</ul>

 

1. class가 marked이면서 id가 active인 요소들을 선택해서 배경색을 빨간색으로 적용

<script>
    $(".marked", "#active").css("background-color", "red");
</script>

실행 결과

 

2. id가 active인 요소들 중에서 class가 marked인 요소들만 선택해서 배경색을 빨간색으로 적용

<script>
    $("#active .marked").css("background-color", "red");
</script>

실행 결과

 

---

.find()

find()는 jQuery 객체 내에서 엘리먼트를 조회하는 기능을 제공한다. 아래의 코드는 위의 예제와 효과가 같다.

$("#active").find('.marked').css("background-color", "red");

실행 결과

 

find()는 체인을 끊지 않고 작업의 대상을 변경하고 싶을 때 사용한다. 기본 예제를 아래와 같이 변경해보자.

$("#active").css("color", "blue").find('.marked').css("background-color", "red");

id가 active인 엘리먼트들의 글자색을 파란색으로 변경한 후에, class가 marked인 엘리먼트만을 조회해서 배경색을 붉은색으로 지정하고 있다.

실행 결과

 

find()를 너무 복잡하게 사용하면 코드를 유지보수하기 어렵게 된다.