웹브라우저 JavaScript

jQuery 조회 범위 제한

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

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>

실행결과

<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>

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

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

.find()

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

$( "#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 엘리먼트에 해당하는 모든 엘리먼트의 전경색을 파란색으로 변경한 후에 li 엘리먼트만을 조회해서 배경색을 붉은색으로 지정하고 있다.  

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

더 많은 예제는 jQuery의 메뉴얼을 참고하자. .find()

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다.
  2. 감사합니다
  3. tachyon
    감사합니다
  4. yihsang
    아래 국제표준규격님의 말씀도 새겨 듣겠습니다.
    감사합니다.
  5. Banbok
    .find() 유용해 보이네요. 감사합니다.
  6. JustStudy
    2016.07.08 금
    고맙습니다 3.
  7. JustStudy
    2916.07.01금
    고맙습니다 2.
  8. 이주환
    2016. 04. 27
    잘보고갑니다~!
    find 잘만 사용하면 정말 유용합니다.
    하지만 너무 남용하는것은 좋지않죠.
  9. JustStudy
    고맙습니다
  10. 국제표준규격
    1. 대략 '데이터를 필터 처리해서 움직이게 하는 두개의 슬라이더' 그런데 맥락이 없어서 무슨 뜻인지 모르겠네요. 그 앞에 there에 대한 명사가 있었을 텐데요.
    2. 생활코딩 영상 10번씩 보고 다른 유튜브의 모든 인터넷 영상 보셔도 '자신의 머리와 손으로 로직을 자유자재로 구현해 내기 전까지' 실제로 만들 수 있는 건 (아마) 한개도 없을 겁니다. 수영하는 잘하는 법에 대해서 10년간 공부해도 물에 들어가 본적이 없다면 별 소용 없는 것과 같은 이치에요.
    대화보기
    • jovi23
      I have created a page where two sliders are there to filter the data. Need help in adding style to sliders.
      여기서...
      two sliders are there to filter the data <--- 이것이 뭔지 모르겠는데 아시는 분 설명좀 부탁해요!! 궁금해서요.

      freelancer.com 이라는 싸이트에서 작은 프로젝트 하나 도전해 볼까 해서 가입해서 찾아보고 있거든요.
      제가 할 수 있는 일은 없더군요.
      생활코딩에서 HTML, CSS3, 웹어플리케이션 만들기 완주하고, 자바스크립트, 웹브라우저 자바스크립트, PHP 기본 수업, 각각 반 정도까지 온 상태인데...
      아직 초보라 그런지 할 수 있는게 없더라구여... ㅋㅋㅋ
    • WayneKing
      과부하... 어렵지 않은 데
      역시 너무 짧은 시간에 너무 많이 봤다;;;
    • 오아시스
      네 상관없습니다.

      다만, 만약 큰틀로 묶을경우

      ex) "어쩌구저쩌구('아아')" 이렇게 2중으로 들어가는 경우에는 바깥에는 "" 쌍따옴표를 줬다면 안에는 '' 작은거

      그 반대라면 바깥에 ''를 줬다면 안에는 "" 큰따옴표 이런식으로 주셔야합니다.

      작따, 큰따 구분없이 되는 경우도 있습니다
      대화보기
      • 2015-11-12
        수능 날 2배속으로 감상 끝.
      • 코딩!
        감사합니다!
      • 심재현
        괄호 ( ) 안에 선택자를 감쌀때 큰따옴표.."" 감싸는거랑, 작은따옴표 '' 로 감싸는거랑 결과는 같던데요... 상관없는 건가요?
      • 육점이
        감사합니다 ^^ 명강의입니다.
      • socialg
        3-4명의 쓰레기같은 유료강의를 여러번 들어봤지만,
        find를 어떤때 써야 하는지 명쾌하게 설명해준 사람은 한명도 없었습니다.
        아 이렇게 좋은 곳을 먼저 왔었어야 하는데..ㅠㅠ
      • 출출해
        $(".marked:eq(0)")
      • ㅏㅏㅏ
        $($(".marked")[0])
      • Soori
        제가 답변해도 될런지 모르겠지만... 저는 그냥 var m = document.getElementsByClassName('marked'); m[0]; 로 구했어요.. 만약 중간에 저게 있다면 for문을 돌려서 id값이 없는 걸 찾아볼 것 같아요.(쓰고 보니 단순무식하여.. 원하시는 답이 아닐 것 같군요.)
        대화보기
        • 규빈이아빠
          명강의입니다^^
        • nosugarinmycoffee
          질문이 있습니다!! 조회범위를 제한하는데 있어서 만약에... #active 밑에 클래스 값 marked를 지닌 두 엘리먼트 말고 젤 위에 클래스 값 marked를 지닌 리스트 엘리먼트'만'을 선택할려면 어떻게 해야하나요.. 제가 너무 이상하게 생각을 하고 있는건지... 선생님께서 시연해주시는 코드를 혼자서 연습을 하다가 이리저리 굴려보곤합니다만, 궁금해서 여러가지를 제이쿼리의 선택자로 입력해보았지만,('.marked:first-child' // 'ul li:first-child' // ) 결과를 얻을수가 없어서 질문드립니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기