jQuery API 정복 - 하위 요소 전부 찾기, find()

.find()

.find( selector )Returns : jQuery

개요 : 선택된 요소 집합에서 선택자, jQuery 객체, 요소와 같은 인자에 맞는 요소들을 걸러내어 줍니다.

.find( selector )
selector 일치하는 요소를 위한 선택자가 표현된 문자열
.find( jQuery object )
jQuery object 요소를 찾을 jQuery 객체
.find( element )
element 요소를 찾을 요소 표현

jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .find() 함수를 사용하면 DOM tree 에서 하위(자식) 요소들을 찾아내어 새로운 jQuery 객체를 생성합니다. .find()와 .children()함수는 비슷합니다. 하지만 .children()함수는 직계 자식 요소만을 추출할 수 있는 것이 .find()함수와 다른점 입니다.

예제를 보시겠습니다.

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

item II 를 기준으로 li 요소들을 모두 찾아내는 스크립트는 아래와 같습니다.

$('li.item-ii').find('li').css('background-color', 'red');

이 스크립트에 영향을 받는 li 요소들은 A, B, 1, 2, 3, C 입니다. 즉, 하위(자식) 요소들을 깊이에 상관없이 모두 찾아내어 준다는 뜻입니다. 위에서도 말씀드렸듯이 .children()과 가장 큰 차이점입니다.

참고로 이번에 개정된 jQuery 1.6 버전에서는 jQuery 객체를 .find() 함수에 인자로 넣을 수 있게 되었습니다. 아래와 같은 방법으로 해 보십시요.

var $allListElements = $('li');
$('li.item-ii').find( $allListElements );

짜잔! 변수명 앞에 $를 붙이면 jQuery 객체로 사용할 수 있게 되네요. 중요~~ 돼지꼬리 별 땡땡~~

예 제
span 태그를 자식 요소로 가지고 있는 p 요소를 찾습니다. 마치 $("p span") 와 같은 효과입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
  $("p").find("span").css('color','red');
</script>

</body>
</html>

미리보기

span 안에 있는 텍스트의 색깔이 빨간색으로 바뀌었습니다. 와우~~

예 제
span 태그 jQuery 객체에 담은 후 p 태그안의 인자로 사용합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    span { color: blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>
  <div>Did you <span>eat</span> yet?</div>
<script>
  var $spans = $('span');
  $("p").find( $spans ).css('color','red');
</script>

</body>
</html>

미리보기

예제 1과 같은 효과입니다만 인자 전달 방법을 다르게 한 내용입니다. 와우 II~~

예 제
평범한 텍스트입니다. 각 단어를 기준으로 모든 단어를 span 태그로 감싼 후 마우스 오버/아웃 효과를 주고 't'가 단어에 포함되어 있으면 텍스트를 기울입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { font-size:20px; width:200px; cursor:default; 
      color:blue; font-weight:bold; margin:0 10px; }
  .hilite { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
  When the day is short
  find that which matters to you
  or stop believing
  </p>
<script>
  var newText = $("p").text().split(" ").join("</span> <span>");
  newText = "<span>" + newText + "</span>";

  $("p").html( newText )
    .find('span')
    .hover(function() { 
      $(this).addClass("hilite"); 
    },
      function() { $(this).removeClass("hilite"); 
    })
  .end()
    .find(":contains('t')")
    .css({"font-style":"italic", "font-weight":"bolder"});

</script>

</body>
</html>

미리보기

헉~ 이 예제보고 헉 했습니다. 너무 복잡하잖아요.

그래도 함 차분히 봐볼까요. ㅎㅎ;; 설명 후 코드입니다.

p 태그를 찾아서 안에 있는 텍스트 찾아냅니다. split함수를 사용해서 공백기준으로 문자들을 분리해낸 후에 분리된 문자에 를 붙여줍니다. 앗~ 이렇게 해서 언제 다 분석하지 ㅠㅠ

var newText = $("p").text().split(" ").join(" ");

위에서 만들어 놓은 문자열을 다시한번 span 태그로 감쌉니다.

newText = "" + newText + "";

자 여기까지 진행하면 어떤 모양으로 바뀌었을까요?? 맞습니다. 아래와 같이 마크업이 바뀌게 되는 겁니다.

<p><span>
</span> <span></span> <span>When</span> <span>the</span> <span>day</span> <span>is</span> <span>short
</span> <span></span> <span>find</span> <span>that</span> <span>which</span> <span>matters</span> <span>to</span> <span>you
</span> <span></span> <span>or</span> <span>stop</span> <span>believing
</span> <span></span> <span></span></p>

와우 증말 신기하지 않나요? ㅎㅎㅎ

이건 쉽죠? 위에서 만든 즉, 바뀐 마크업을 p 태그안에 집어넣습니다.

$("p").html( newText )

그리고 난뒤 span 태그를 찾습니다. 좀 작위적이긴 하지만 예제를 위한 예제니까.. 하하

.find('span')

hover() 함수는 마우스 오버/아웃 이벤트 시 발생할 일을 적어넣을 수 있습니다. 여기서는 'hilite'라는 클래스를 붙였다 없앴다 하는 것입니다. 'hilite' 클래스는 위쪽에 정의되 있죠.

.hover(function() { 
      $(this).addClass("hilite"); 
    },
      function() { $(this).removeClass("hilite"); 
    })

그리고 문제의 end() 함수입니다. hover() 함수까지 적용한 뒤에 나온 end() 함수 때문에 시점이 .find('span')으로 올라가게 됩니다. 즉 다시 span 태그들을 찾은 부분으로 돌아가게 됩니다. 간단한 함수지만 아주 중요한 의미를 내포하고 있습니다. 사실 개념이 좀 모호하긴 합니다. end라는 단어는 종료라는 느낌이 강해서 말이죠.

.end()

자, span태그들 안에 't' 문자를 가지고 있는 단어들을 모두 찾습니다.

.find(":contains('t')")

찾은 요소들의 텍스트를 기울이고 진하게 해줍니다.

.css({"font-style":"italic", "font-weight":"bolder"});

부왁ㅋㅋ. 정말 완벽한 설명 아닌가요? ㅎㅎㅎㅎㅎ

마지막 예제를 길게 설명을 할까 망설이다가 함 해봤습니다. 하고 나니 후련하네요. ㅎㅎ. 도움이 되시길 바랍니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

저작자표시 비영리 변경금지

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery API 정복 - 마지막 요소 찾기, last() (0)	2011.05.31
jQuery API 정복 - 맞는지 확인하기, is() (6)	2011.05.30
jQuery API 정복 - 가지고 있나 없나? has() (2)	2011.05.25
jQuery API 정복 - 첫번째 요소 찾기, first() (2)	2011.05.24
jQuery API 정복 - 선택 요소 집합에서 추출하기, filter() (8)	2011.05.12
jQuery API 정복 - 인덱스로 요소 찾기, eq() (4)	2011.05.02
jQuery API 정복 - 이전 선택요소로 돌아가기, end() (2)	2011.04.29
jQuery API 정복 - 선택된 요소만큼 루프, each() (4)	2011.04.28

즐거움을 찾자 Find Fun!!

jQuery API 정복 - 하위 요소 전부 찾기, find()

'프로그래밍 > jQuery' 카테고리의 다른 글

티스토리툴바

jQuery API 정복 - 하위 요소 전부 찾기, find()

'프로그래밍 > jQuery' 카테고리의 다른 글

관련글

티스토리툴바