[JQuery] 제이쿼리, find() 함수 사용법! children() 함수와의 차이점

find() 함수

- 매개변수 : selector(#id .class), Jquery객체, element

- 요소의 하위에 속한 요소들을 selector, Jquery 객체, 자바스크립트 객체를 통해서 가져온다.

- 제이쿼리에 사용할 수 있으며 () 매개변수 안에 selector가 들어갈수 있다.

출처 : jquery api

<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 태그를 찾고싶다면(말그대로 find)

 

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

이렇게 찾아서 처리할 수 있습니다.

해석해보자면 li태그인데 item-ii 클래스를 가진 li 태그를 찾아서 배경색을 빨간색으로 바꿔!

또한 li 태그 객체 리스트로 받은 제이쿼리 배열을 담은 변수 allListElements를 find함수의 인자로 넣어보면

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

모든 li태그를 allListElements 변수에 담으면 allListElements는 제이쿼리 배열객체가 됩니다.

이렇게 find함수 인자로 넣게되면 li.item-ii의 자식태그인 li태그들을 모두 찾게 됩니다.

즉, $(부모).find(만족하는 자식) 의 공식이 성립한다고 할 수 있습니다.

allListElements는 모든 li태그이지만 find함수 인자로 들어가는순간 의미가 달라지게 됩니다. li.item-ii의 selector의 자식으로 li 제이쿼리 객체를 찾는 것입니다.

find() 함수와 children() 함수의 차이점

- find() 함수는 선택된 태그(객체)의 모든 자식태그들을 검색해서 찾는 것

- children() 함수는 선택된 태그(객체)의 바로 1단계 아래 자식을 찾는것.

$("ul.level-1").find("li");
$("ul.level-1").children("li");

이 두개의 Jquery 코드는 의미가 완전히 다릅니다.

1번 문장은 깊숙히 있는 li태그(class=item-1,2,3)까지 모두 배열로 가져오고,

2번 문장은 ul태그 바로 자식태그인 li태그(item-i,ii,iii)까지만 배열로 가져오게 됩니다.

children() 함수의 특이한 사용법

- 만약 다음과같은 테이블 구조가 있다고 할때,

<table id="tbl1">
    <thead></thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>    
</table>

저 123을 가진 tr(첫번째 tr)을 가져오고 싶다면

$("#tbl1 tbody").children("tr:first");

이런식으로 처리할 수도 있습니다.