티스토리 뷰

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> 

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼