/* =========================== */ Show [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ /* =========================== */ [소스 코드]
/* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택합니다 2. parents() 메소드는 선택한 요소의 조상(ancestor) 요소를 모두 선택합니다 3. children() 메소드는 선택한 요소의 자식(child) 요소를 모두 선택합니다 */ /* =========================== */ [JQuery] JQuery 노드 찾기 – 찾은 노드 중 n 번째 노드 접근 방법
안녕하세요.
오늘은 JQuery에서 노드 찾기에 대해서 알아보려고 합니다.
그 중에서도, 찾은 노드 중 n 번째 노드에 접근하는 방법에 대해서 알아보려고 합니다.
앞서, 노드의 개수를 찾는 방법을 공부 했었는데요.
이번에는 찾은 노드 중에서 예를 들어 div라는 태그가 5개가 있는데, 이 중에서 3번째 div 노드에 어떻게 접근하는지 알아보려고 합니다.
참고로, 예제 코드는 “자바스크립트 + JQuery 완전정복 스터디 2권” 책을 참고해서 작성했다는 점 알아주시면 좋겠습니다!
사용 방법$대상.eq(index)
찾은 노드 중 n 번째 노드에 접근하는 구문은 위와 같습니다.
그럼 이제 예제 코드를 통해서 어떻게 실제 저 구문을 이용하는지 알아보도록 하겠습니다.
예제 코드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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</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: aqua; } </style> <!-- CND 적용 방법 1 : 구글 cdn --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> $(document).ready(function(){ //찾은 노드 중 n 번째 노드에 접근하기 let $liList = $("ul.menu li"); let $li_2 = $liList.eq(2); //2번째 li 노드에 접근 $li_2.css("border", "5px solid red");
let $pList = $("p"); let $p_1 = $pList.eq(1); $p_1.css("border", "4px solid yellow"); }); </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>id로 찾기</li> <li class="select">tag로 찾기(li, class=select)</li> <li>class로 찾기(li)</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 class="test2">3. 마지막 자식 노드 찾기(p, class=test2)</p> </div> </div>
<div id="footer"> 푸터 영역(div, footer) </div> </div> </body> </html> Colored by Color Scripter cs
실행 결과위와 같이 $liList.eq(2), $pList.eq(1) 구문을 이용해서 해당 n 번째 인덱스에 해당하는 요소의 border 색상이 변경된 것을 확인하실 수 있습니다.
감사합니다.^^ 728x90 공유하기 게시글 관리 구독하기BeomBeomJoJo저작자표시 비영리 '웹 프로그래밍 > JQuery' 카테고리의 다른 글[JQuery] JQuery 노드 찾기 – 특정 노드만 찾기 (0)2021.01.09[JQuery] JQuery 노드 찾기 – 순차적으로 찾은 노드 접근하기 (0)2021.01.08[JQuery] JQuery 노드 찾기 – 찾은 노드의 개수 구하기 (0)2021.01.06[JQuery] JQuery 노드 찾기 – 속성으로 노드 찾기 (0)2021.01.05[JQuery] JQuery 노드 찾기 – 클래스 이름으로 노드 찾기 (0)2021.01.04이 글을 공유하기 Google + Kakao Naver '웹 프로그래밍/JQuery' 관련 글더 보기 [JQuery] JQuery 노드 찾기 – 특정 노드만 찾기2021.01.09 더 읽기 [JQuery] JQuery 노드 찾기 – 순차적으로 찾은 노드 접근하기2021.01.08 더 읽기 [JQuery] JQuery 노드 찾기 – 찾은 노드의 개수 구하기2021.01.06 더 읽기 [JQuery] JQuery 노드 찾기 – 속성으로 노드 찾기2021.01.05 더 읽기 댓글(0) 비밀 글 등록 |