5. (jquery/제이쿼리) Jquery 사용해 closest, parents 부모 노드 찾기 및 children 자식 노드 찾기

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

[ 개발 환경 설정 ]

​

개발 툴 : 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) 요소를 모두 선택합니다

*/

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