웹브라우저 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. 신시내티
    $( "#active .marked").css( "color", "red" );
    -> #active 안에 있는.marked 안에 있는 애들 색 빨갛게 바꿔.

    $('#active').css('color','blue').find('.marked').css( "background-color", "red" );
    -> #active 안에 있는 애들 색을 다 파랗게 바꿔.
    ->근데 #active 안에 있는 애들중에.marked 안에 있는 애들만 빨갛게 바꿔.
  3. crable
    감사합니다
  4. 감사합니다~
  5. 하니앨
    맞습니다.

    보통 번역하면 하위 객체를 자손과 후손으로 나누는데 후손 객체에서 해당 엘리먼트를 찾습니다.
    대화보기
    • 주니주니당
      $('#active').find('.marked').css('background-color','gray');

      $('li').find('.marked').css('background-color','gray');

      #active 부분을 li로 바꾸어 실행해 보았는데, 직관적으로
      맨 위 list <li class="marked">html</li>
      까지 선택되서 css 가 적용 되리라 생각했습니다.

      하지만 시행 결과 css가 적용 되지 않아서
      find method가 해당 객체 하위의 객체만 불러온다고 이해했는데,
      이렇게 이해한 것이 맞는지 알고 싶습니다!
    • 폭스킴
      find를 너무 복잡하게 사용하면 코드를 유지보수하기 어렵게 된다.
    • 유유
      감사합니다.
    • hyuna
      감사합니다
    • tachyon
      감사합니다
    • yihsang
      아래 국제표준규격님의 말씀도 새겨 듣겠습니다.
      감사합니다.
    • Banbok
      .find() 유용해 보이네요. 감사합니다.
    • JustStudy
      2016.07.08 금
      고맙습니다 3.
    • JustStudy
      2916.07.01금
      고맙습니다 2.
    • 이주환
      2016. 04. 27
      잘보고갑니다~!
      find 잘만 사용하면 정말 유용합니다.
      하지만 너무 남용하는것은 좋지않죠.
    • JustStudy
      고맙습니다
    • 국제표준규격
      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 자세히 보기