5. JQuery 형제요소 가져오기

JQuery

황민준 2022. 8. 30. 15:59

여러 가지 함수를 이용하여 자신의 동일한 선상의 요소(형제)를 가져올 수 있다.

형제 요소를 가져오는 함수들은 자신(지정한 요소)를 포함하지 않는다.

요소.siblings()	지정한 요소의 모든 형제 요소를 가져온다.
요소.next()	지정한 요소의 형제 요소 중 바로 다음(아래)에 있는 요소를 가져온다.
요소.prev()	지정한 요소의 형제 요소 중 바로 이전(위)에 있는 요소를 가져온다.
요소.nextAll()	지정한 요소의 형제 요소 중 다음(아래)에 있는 모든 요소를 가져온다.
요소.prevAll()	지정한 요소의 형제 요소 중 이전(위)에 있는 모든 요소를 가져온다.
요소.nextUntil("태그 혹은 셀렉터")	지정한 요소와 다음(아래)에 있는 형제 요소 중 입력한 태그 혹은 셀렉터까지 사이의 요소들을 가져온다. (지정한 요소&목표한 형제요소는 미포함)
요소.prevUntil("태그 혹은 셀렉터")	지정한 요소와 이전(위)에 있는 형제 요소 중 입력한 태그 혹은 셀렉터까지 사이의 요소들을 가져온다. (지정한 요소&목표한 형제요소는 미포함)

* siblings() / next() / prev() / nextAll() / prevAll() / nextUntil() / prevUntil() 예시

<!DOCTYPE html>

<head>

<style>

.siblings *{

display: block;

border: 2px solid gray;

padding: 5px;

margin: 15px;

}

</style>

</head>

<body>

<div class="siblings">DIV(parent)

<p>Element 1</p>

<span>Element 2</span>

<span>Element 3</span>

<span>Element 4</span>

<h3>Element 5</h3>

<h4>Element 6</h4>

<h5>Element 7</h5>

<h6>Element 8</h6>

<p>Element 9</p>

</div>

</body>

//siblings() : 동일 선상에 모든 요소 선택 (본인 제외)

//$("h3").siblings().css("background","red");

//next() : 선택한 요소 한 칸 아래

//$("h3").next().css("background","blue");

//prev() : 선택한 요소 한 칸 위

//$("h3").prev().css("background","green");

//$("h3").nextAll().css("background","blue");

//$("h3").prevAll().css("background","green");

// $("h3").prevUntil("p").css("background","green");

// $("h3").nextUntil("p").css("background","blue");

</script>

</html>