[JQUERY] 하위 요소의 탐색 .children() .find()

하위 요소의 탐색

특정 하위 요소를 탐색하기 위한 메소드 .children()과 .find()의 차이점

.children()	바로 아래 요소, 자식 요소에서만 찾을 때
.find()	자식을 포함한 모든 하위 요소에서 찾을 때

 

 

출처 :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>

 

li의 'item-li'클래스의 하위 요소 중 li 를 모두 찾아 css를 변경하고 싶다면 --> .find()

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

 

li 의 'item-li'클래스의 자식 요소 중 li 선택하여 css를 변경하고 싶다면 --> .children()

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

 

 

또한, 여러개의 li중 몇번째 li를 찾고싶은지 지정하고 싶다면

// 첫번째 li를 찾을때
$('ul').children('li:eq(0)'); /return 첫번째 li

-> ul의 자식 요소 li에서 첫번째 값을 return

eq메소드 문법
- 제이쿼리(Jquery)의 변수에 인덱스 번호를 부여하여 eq() 메소드로 요소를 뽑아낸다.
자바에서 리스트 형태로 가져오는 것과 똑같다. eq(0)부터 첫번째 시작
출처 : https://yongku.tistory.com/entry/JavaScriptJquery-Jquery-eq-%EB%A9%94%EC%86%8C%EB%93%9C%EB%9E%80