[ Element ] jQuery 조회 범위 제한

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

 

jQuery에서 조회 범위가 그 객체의 하위 element로 제한하려면 어떻게 작업해야할까?

 selector context 

가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것이다.

그 제한된 범위를 jQuery에서는 selector context라고 한다.

<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>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $( ".marked", "#active").css( "background-color", "red" );
</script>

선택자를 아래처럼 작성해도 결과가 같다.

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

 

위 코드를 실행하면 아래와 같이, style이 적용된 것을 확인 할 수 있다.

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked" style="background-color: red;">DOM</li>
            <li class="marked" style="background-color: red;">BOM</li>
        </ul>
    </li>
</ul>

---

 .find( ) 

find는 jQuery 객체 내에서 element를 조회하는 기능을 제공한다.

---

아래의 코드는 find함수를 이용한 것으로, 위의 예제와 효과가 같다.

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

---

find를 쓰는 이유는 체인을 끊지 않고 작업의 대상을 변경하고 싶을 때 사용한다.

 

기본 예제를 아래와 같이 변경해보자.

아래 예제는 두가지 작업을 수행하도록 작성한 코드이다.

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

실행결과는 아래와 같이 출력된다.

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active" style="color: blue;">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked" style="background-color: red;">DOM</li>
            <li class="marked" style="background-color: red;">BOM</li>
        </ul>
    </li>
</ul>

 

li.item-li 라는 element에 해당하는 모든 엘리먼트의 전경색을 파란색으로 변경한 후에 li 엘리먼트만을 조회해서 배경색을 붉은색으로 지정하고 있다.  

---

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

더 많은 예제는 jQuery의 메뉴얼을 참고하면 된다. ( api.jquery.com/find/ )