본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 트리구조

트리구조

Tree 구조를 기반으로 찾아가는 방식입니다.


트리구조 탐색(Tree Traversal)

메서드 설명
.children() 선택한 요소의 바로 아래 자식 요소만 선택합니다.
.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.
.find() 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.
.next() 선택한 요소의 다음 요소를 선택합니다.
.nextAll() 선택한 요소의 다음 모든 요소를 선택합니다.
.nextUntil() 선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾습니다.
.parent() 선택한 요소의 부모 요소를 선택합니다.
.parents() 선택한 요소의 모든 부모 요소를 선택합니다.
.parentsUntil() 선택한 요소의 부모 요소 중 조건에 맞을 때까지 찾습니다.
.prev() 선택한 요소의 이전 요소를 선택합니다.
.prevAll() 선택한 요소의 이전 모든 요소를 선택합니다.
.prevUntil() 선택한 요소의 이전 요소 중 조건에 맞을 때까지 찾습니다.
.siblings() 선택한 요소의 형제 요소를 모두 찾습니다.
Sample : 트리구조 탐색
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
			$(document).ready(function(){
				//$(".list").children("li").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list").find("li").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".one4").prev("li").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".one4").prevAll("li").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".one4").next("li").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$(".one4").nextAll("li").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$(".one4").siblings().css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$(".one4").parent().css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
			});
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul>
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>				
				<li class="one7">one7</li>
				<li class="one8">one8</li>
				<li class="one9">one9</li>
				<li id="one10">one10
					<ul>
						<li>one10-1<img src="../css.png" alt="이미지"></li>
						<li>one10-2<img src="../html5.png"></li>
						<li>one10-1</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html> 

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기