• 회원가입
  • 로그인

[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>


결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012