[Selector] JQ - element + next 선택자 - 바로 뒤 형제요소 선택.

1. element + next 예제 - div 요소 바로 뒤 형제요소 p 선택.
2. element + next 정의
3. element + next 구문
4. element + next 예제 - ul 요소 바로 뒤 형제요소 div 선택.

element + next 예제 - div 요소 바로 뒤 형제요소 p 선택.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div + p").css("background-color", "yellow");

});

</script>

<style>

div {border:1px solid black; padding:10px;}

</style>

<div>홈짱닷컴 Homzzang.com</div>

<p>가</p>

<p>나</p>

<div>

  <p>다</p>

</div>

<h2>라</h2>

<p>마</p>

 

결과보기

element + next 정의

 

지정 요소 바로 다음 형제요소 선택.

 

---

 

※ element 요소와 next 요소의 부모는 동일 요소여야 함.

 

element + next 구문

 

("element + next")

 

---

[매개변수]

 

element 

필수. 지정 요소.

 

next

필수. 지정 요소 바로 뒤의 형제요소.

 

element + next 예제 - ul 요소 바로 뒤 형제요소 div 선택.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("ul + div").css("background-color", "yellow");

});

</script>

<ul>

  <li>홈짱닷컴 Homzzang.com</li>

</ul>

<div>가</div>

<p>나</p>

<div>다</div>

<ul>

  <li>라</li>

</ul>

<div>마</div>

<p>바</p>

<div>사</div>

결과보기