[jQuery] 제이쿼리 parent / parents

jquery .parent 썸네일

jquery .parent()

 

.parent()는 요소의 바로 위의 부모 요소에게 접근합니다.

 

간단한 예로는 아래와 같다

<!--li들의 부모는 ul입니다-->
<ul>
    <li>1</li>
    <li>2</li>
</ul>

<!--p의 부모는 div입니다-->
<div>
    <p>부모찾기</p>
</div>

 

 

2021.04.21 - [웹언어/jQuery] - [jQuery] 제이쿼리 eq

[jQuery] 제이쿼리 eq

 

eq() 때에 사용했던 예제입니다.

 

<ul class="mainMenu">
    <li>Home</li>
    <li>
        웹언어
        <ul class="subMenu">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
             <li>jQuery</li>
        </ul>
    </li>
    <li>
        색
        <ul class="subMenu">
             <li>PANTONE</li>
        </ul>
    </li>
    <li>기타자료</li>
    <li>일상</li>
</ul>

부모 찾기
$('.mainMenu')를 부모인 친구들	<li>HOME</li> <li>웹언어</li> <li>색</li> <li>기타자료</li> <li>일상</li>
<li>웹언어</li>를 부모로 둔 친구들	<ul class="subMenu">
$(".subMenu")를 부모로 둔 친구들	<li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>PANTONE</li>
<li>색</li>를 부모로 둔 친구들	<ul class="subMenu">

.parent()는 부모의 요소에 접근하게 해 준다.

 

부모를 찾아 제어해줄 수 있다.

 

jquery .parents()

 

.parent()가 부모를 찾는 거라면 .parents('요소명')는 부모를 포함하여 조상 중에서 (조건(요소명))

조건에 해당하는 요소를 찾아서 반환한다.

 

parent(), parents() 모두

$(요소)의 부모나 조상을 탐색한다.

 

사용법

//기초 사용법
//$('요소').parent()
//$('요소').parents('요소')

//class subMenu의 부모의 글자 색을 파랑으로 바꿔라
$('.subMenu').parent().css('color','blue');

//subMenu의 자식 li의 조상중에 ul을 찾아서 색을 빨강으로 바꿔라
$('.subMenu li').parents('ul').css('color','red');

 

See the Pen jQuery .parent() / .parents() by 윤재현 (@jh91) on CodePen.

제어하기 

 

아래의 것들 외에도 다른 여러 가지 방법으로 제어가 가능하다

 

css 속성 변경

 

2021.04.13 - [웹언어/jQuery] - [jQuery] 제이쿼리 css

[jQuery] 제이쿼리 css

 

 

hover 이벤트 추가 변경

 

2021.04.08 - [웹언어/jQuery] - [jQuery] 제이쿼리 hover

[jQuery] 제이쿼리 hover

 

보이고 숨기고 

 

2021.04.16 - [웹언어/jQuery] - [jQuery] 제이쿼리 show / hide

[jQuery] 제이쿼리 show / hide