트리구조
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>
