ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jQuery - .find()
    jQuery 2020. 6. 23. 16:05

    .find()

     

     - 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용

     

    문법

    .find( selector)

    예를 들어

    $('h1').find('span')

    은 h1 요소의 하위 요소 중 span 요소를 선택합니다.


    예제

     - 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를

     

       2배로 만든다.

    <!doctype html>
    
    <html lang="ko">
    
      <head>
      
        <meta charset="utf-8">
        
        <title>jQuery</title>
        
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        
        <script>
        
          $( document ).ready( function() {
          
            $( 'p.b' ).find( 'span.ip' ).css( 'font-size', '2em');
            
          } );
          
        </script>
        
      </head>
      
      <body>
      
        <p class="a">
        
          <span class="lo">Lorem</span>
          
          <span class="ip">Ipsum</span>
          
          <span class="do">Dolor</span>
          
        </p>
        
        <p class="b">
        
          <span class="lo">Lorem</span>
          
          <span class="ip">Ipsum</span>
          
          <span class="do">Dolor</span>
          
        </p>
      </body>
    </html>

     

     

    * 하위 선택자를 이용해서 같은 결과를 만들 수 있다.

    $('p.b').find('span.ip').css('font-size', '2em');

    은 다음 처럼 해도 된다.

    $('p.b span.ip').css('font-size', '2em')

     

    'jQuery' 카테고리의 다른 글

    jQuery - .has()  (0) 2020.06.23
    jQuery - .get()  (0) 2020.06.23
    jQuery - .fadeToggle()  (0) 2020.06.23
    jQuery - .fadeOut()  (0) 2020.06.23
    jQuery - .fadeIn()  (0) 2020.06.23

    댓글

Designed by Tistory.