JQuery 자식 노드 찾기 - jQuery jasig nodeu chajgi

Question

/* =========================== */

목차 Show

[JQuery] JQuery 노드 찾기 – 찾은 노드 중 n 번째 노드 접근 방법
'웹 프로그래밍/JQuery' 관련 글
[JQuery] JQuery 노드 찾기 – 특정 노드만 찾기
[JQuery] JQuery 노드 찾기 – 순차적으로 찾은 노드 접근하기
[JQuery] JQuery 노드 찾기 – 찾은 노드의 개수 구하기
[JQuery] JQuery 노드 찾기 – 속성으로 노드 찾기

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

[소스 코드]

/* =========================== */

[결과 출력]

/* =========================== */

[요약 설명]

/*

[JS 요약 설명]

1. closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택합니다

2. parents() 메소드는 선택한 요소의 조상(ancestor) 요소를 모두 선택합니다

3. children() 메소드는 선택한 요소의 자식(child) 요소를 모두 선택합니다

*/

/* =========================== */

[JQuery] JQuery 노드 찾기 – 찾은 노드 중 n 번째 노드 접근 방법

웹 프로그래밍/JQuery
2021. 1. 7. 00:00

안녕하세요.

오늘은 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>

<head>

<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>

$(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=header)

</div>

노드 찾기(div, id = content, class=sample-content)

일반 노트 찾기(ul, class=menu)

<li class="select">tag로 찾기(li, class=select)</li>

<li>class로 찾기(li)</li>

<li class="test1">속성으로 찾기(li, class=test1)</li>

</ul>

자식 노드 찾기(div, class=content-data)

<p class="test1">1. 모든 자식 노드 찾기(p, class=test1)</p>

<p class="test2">3. 마지막 자식 노드 찾기(p, class=test2)</p>

</div>

푸터 영역(div, footer)

</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

이 글을 공유하기

Facebook

Twitter

Google +

Kakao

Naver