JQuery 부모 노드 - jQuery bumo nodeu

Question

부모 노드 찾기

부모 노드란?

특정 노드를 감싸고 있는 바로 위의 상위 노드를 의미한다.

조상 노드는 특정 노드를 감싸고 있는 모든 노드를 의미한다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<body>

샘플페이지

헤더영역

</div>

</ul>

</div>

푸터영역

</div>

</body>

cs

#content, #header, #samplePage 노드는 ul.menu의 조상노드

#content는 ul.menu 노드의 부모 노드

부모 노드 찾기

특정 노드의 바로 상위 노드인 부모 노드를 찾을 때 parent() 메서드를 사용한다.

조상 노드

특정 노드의 모든 조상 노드를 찾고 싶은 경우 parents() 메서드를 사용한다. 이때 일반 jQuery 메서드와 마찬가지로 선택자를 이용하면 특정 조상 노드만을 찾을 수 있다.

ul.menu 노드의 조상 노드 중 page클래스가 적용된 노드를 찾아 border 속성을 "4px solid #f00"으로 변경

var $menu = $("ul.menu");

$menu.parents(".page").css("border","4px solid #f00");

cs

ul.menu 노드의 모든 조상 노드를 찾아 border 속성을 "4px solid #f00"으로 변경

var $menu = $("ul.menu");

$menu.parents().css("border","4px solid #f00");

cs

플밍 is 뭔들/JavaScript&jQuery

2017. 7. 9. 18:05

부모노드란 어떤 노드의 바로 한단계 위의 노드이고 그 이상의 노드들은 조상 노드라고 한다.

형제노드는 어떤 노드와 같은 단계의 노드를 형제 노드라고 한다.

1.부모 노드 찾기

2.조상 노드 찾기

$대상.parents("선택자")

$대상.parents()

3.이전 형제 노드 찾기

$대상.prev()

바로 이전의 형제 노드를 찾아준다.

$대상.prevAll("선택자")

$대상.prevAll("")

이전의 모든 형제 노드를 찾아준다.

4.이후 형제 노드 찾기

$대상.next()

바로 다음의 형제 노드를 찾아준다.

$대상.nextAll("선택자")

$대상.nextAll()

다음의 모든 형제 노드를 찾아준다.

'플밍 is 뭔들/JavaScript&jQuery' Related Articles

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

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : jquery

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

[소스 코드]

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script  src="https://code.jquery.com/jquery-latest.min.js"></script>


    <!-- 내부 JS 스타일 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택합니다
    	2. parents() 메소드는 선택한 요소의 조상(ancestor) 요소를 모두 선택합니다
    	3. children() 메소드는 선택한 요소의 자식(child) 요소를 모두 선택합니다
    	*/


    	/* 특정 태그 위치 좌표값 구하기 */
    	function main(){
    		console.log("main : start");
    		console.log("");

    		//부모 찾기 수행
    		console.log("부모 찾기 tag id : " + "btn_one_2_txt");  

    		var OneParentId = $("#btn_one_2_txt").closest("div");
    		console.log("[closest]");
    		console.log(OneParentId);

    		var AllParentId = $("#btn_one_2_txt").parents("div");
    		console.log("[parents]");
    		console.log(AllParentId);    		
    		console.log("");


    		//자식 찾기 수행
    		console.log("자식 찾기 tag id : " + "btn_one_container"); 

    		var OneCildId = $("#btn_one_container").children("div");
    		console.log("[children]");
    		console.log(OneCildId);  

    	};

    </script>

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

[결과 출력]

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

[요약 설명]

/*

[JS 요약 설명]

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

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

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

*/

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

jquery 자식노드 jquery 형제노드 jQuery parent id jquery 형제노드 첫번째 jQuery parent li