ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 6. JQuery 요소 검색하기
    JQuery 2022. 8. 30. 16:07

    여러 가지 함수를 통해 원하는 요소만을 검색할 수 있다.

     

    요소.first() 가져온 요소들 중에 첫 번째 요소를 가져온다.
    요소.last() 가져온 요소들 중에 마지막 요소를 가져온다.
    요소.eq(인덱스번호) 가져온 요소들 중에 원하는 인덱스를 가져온다.
    (인덱스 번호 = 원하는 순서 -1)
    요소.filter("태그 혹은 셀렉터") 가져온 요소들 중에 원하는 태그 혹은 셀렉터에 해당하는 요소들을 가져온다.
    요소.not("태그 혹은 셀렉터") 가져온 요소들 중에 입력한 태그 혹은 셀렉터에 해당하지 않는 요소들을 가져온다.

     

     

    * first() / last() / eq() / filter() / not() 예시

    <!DOCTYPE html>
    <head>
        
        <meta charset="UTF-8">
        <title>문서 제목</title>
        <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
        <style>
            
        </style>
    </head>
    <body>
        
        <div style="border: 1px solid black;">
            <p>1번째 div 요소</p>
            <p class="sel">2번째 div 요소</p>
            <p>3번째 div 요소</p>
            <p class ="sel">4번째 div 요소</p>
        </div>
        <div style="border: 1px solid black;">
            <p>5번째 div 요소</p>
            <p class="sel">6번째 div 요소</p>
            <p>7번째 div 요소</p>
            <p class ="sel">8번째 div 요소</p>
        </div>
    </body>
    <script>
    //배열 개념 : 덩어리로 가져와서 n 번째
        // console.log($("div p"));
        // console.log($("div p").first());
        // console.log($("div p").last());
        console.log($("div p").eq(3));
    //필터 개념(가져온 녀석을 한 번 더 걸러낸다)
        console.log($("p").filter(".sel")); //p태그 중에서 class가 sel인 요소
        console.log($("p").not(".sel")); //p태그 중에서 class가 sel이 아닌 요소
    </script>
    </html>
Designed by Tistory.