jQuery 선택자 다루기
찾은 노드의 개수 다루기 : length
찾은 노드 중 n번째 노드 접근하기 : eq()
순차적으로 찾은 노드 접근하기 : each()
찾은 노드 중에서 특정 노드만 찾기 : filter()
찾은 노드의 자손(자식포함) 노드 중 특정 노드 찾기 : find()
인덱스 값 구하기 : index()
찾은 노드의 개수 다루기 : length
jQuery의 length 프로퍼티를 이용하여 리턴 된 jQuery객체 내부에 들어 있는 노드 개수를 구할 수 있다.
예를 들어 div 태그의 개수를 구하려면 $("div").length를 사용하면 된다.
1 | $("div").length |
찾은 노드 중 n번째 노드 접근하기 : eq()
jQuery의 eq() 메서드를 이용하면 찾은 노드의 n번째에 해당하는 노드에 접근할 수 있다. 배열과 같이 0이 첫 번째를 나타낸다. 2번째 li태그를 변경하려면 아래 예제와 같이 사용하면 된다.
1 2 3 4 | var $liList = $(li); var $li_1 = $liList.eq(1); //같은 의미 var $li_1 = $liList[1]; //같은 의미 $li_1.css("border", "4px solid"); |
순차적으로 찾은 노드 접근하기 : each()
자바스크립트에서 많이 보았던 each() 메서드를 사용하여 순차적으로 접근 가능하다.
1 2 3 4 | var $liList = $("li"); $liList.each(function(index) { console.log(index + " : " + $liList[index]); }); |
찾은 노드 중에서 특정 노드만 찾기 : filter()
찾은 노드 중에서 특정 노드만을 걸러 내고 싶을 때 finter() 메서드를 사용한다. 예를 들어 찾은 li태그 중에서 select 클래스가 적용된 도드를 찾아 css를 변경한다면 아래와 같이 사용하면 된다.
1 2 3 | var $liList = $("li"); $liList.filter(".select").css("border", "4px solid"); |
찾은 노드의 자손(자식포함) 노드 중 특정 노드 찾기 : find()
find()를 사용할 때 주의할 점은 현재 노드가 아닌 현재 노드의 자식을 포함한 자손 노드를 검색한다는 것이다, 덧붙여 설명하자면 오직 바로 아래 자식 노드에서 특정 노드를 찾고 싶은 경우는 자식 노드 찾기에서 사용되는 children() 메서드를 사용한다.
find() 설명을 위해 아래 예제와 문제가 있다. 아이디가 content인 노드의 자손(자식 포함) 노드 중에서 test1 클래스가 적용된 노드를 찾아 css를 변경해야 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> </title> <style> body{ font-size:9pt; font-family:"굴림"; } div, p, ul, li{ border:1px #eeeeee solid; margin:10px; } ul { padding:10px; } li.select { background-color:#ccc; } </style> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { }); </script> </head> <body> <div id="samplePage" class="page" > 샘플 페이지(div, id=samplePage, class=page) <div id="header"> 헤더 영역(div, id=header) </div> <div id="content" class="sample-content"> 노드 찾기(div, id=content, class=sample-content) <ul class="menu"> 일반 노드 찾기(ul, class=menu) <li data-value="1">id로 찾기(li, data-value=1)</li> <li class="select">tag로 찾기(li, class=select)</li> <li data-value="2">class로 찾기(li, data-value=2)</li> <li class="test1">속성으로 찾기(li, class=test1)</li> </ul> <div class="content-data"> 자식 노드 찾기(div, class=content-data) <p class="test1">1. 모든 자식 노드 찾기(p, class=test1)</p> <p>2. 특정 자식 노드만 찾기(p)</p> <p class="test2">3. 마지막 자식 노드 찾기(p, class=test2)</p> </div> </div> <div id="footer"> 푸터 영역(div, id=footer) </div> </div> </body> </html> |
1 2 | var $content = $("#content"); $content.find(".test1").css("border", "4px solid"); |
인덱스 값 구하기 : index()
노드가 위치한 인덱스 값을 알 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <script> $(document).ready(function() { $('li').click(function() { alert($(this).index()); }); }); </script> <body> <ul> <li> ktko1 </li> <li> ktko2 </li> <li> ktko3 </li> <li> ktko4 </li> </ul> </body> </html> |
'jQuery' 카테고리의 다른 글
| jQuery 노드의 내용 읽고 변경하기 (0) | 2018.07.18 |
|---|---|
| jQuery 노드를 생성/추가/삭제/이동 하기 (0) | 2018.07.17 |
| jQuery 선택자(자식, 부모, 형제) (2) | 2018.07.17 |
| jQuery 선택자(ID, CLASS, TAG, 속성) (0) | 2018.07.16 |
| $(document).ready() VS window.onload() (0) | 2018.07.16 |
