안녕하세요. 터미네입니다.
이번 포스팅은 jQuery로 부모 자식 요소를 찾는 방법을 소개합니다.
$를 활용하면 왠만하면 jQuery를 사용하는 것이죠.
자 우선 이해를 돕기 위해 html 예시 소스를 통해 실습을 해보겠습니다.
<html>
<head>~~</head>
<body>
<div id="firstDiv">
<ul>
<li>사과</li>
<li>오렌지</li>
<li>포도</li>
<li>딸기</li>
</ul>
<div>
<div id="secondDiv">
<a href="#" id="secondDivChild"><span>자자</span></a>
</div>
</body>
</html>body 안에 있는 첫번째 div태그는
id가 firstDiv이고
그 하위 요소는 ul태그와 li태그가 있습니다.
ul의 스타일을 적용하려면 어떻게 해야될까요?
방법은 두 가지가 있습니다.
1. div태그의 id인 firstDiv를 활용하여 ul에 css를 적용
$("#firstDiv > ul").css({"border": "1px solid black"});
$("#firstDiv > ul").attr("style", "border:1px solid black;");
2. ul태그에 css를 적용
$("ul").css({"border": "3px solid blue"});
$("ul").attr("style", "border:3px solid blue;");
자 이제는 ul의 하위 요소인 li도
스타일을 적용해보겠습니다.
children() 함수를 활용해보도록 하겠습니다.
.children()은 요소의 자식요소를 모두 선택합니다.
$("ul").children().css({"border": "2px solid red"});
$("ul").children().attr("style", "border:2px solid red");
자 이번에는 부모 요소를 찾아서
스타일을 적용해보겠습니다.
id가 secondDiv에 스타일을 적용해볼건데,
쉽게쉽게 했을 경우는 $("#secondDiv").attr(~,~)를 하면
금방 구현할 수 있지만,
부모요소를 찾아서 스타일을 적용하는 것을
해보도록 하겠습니다.
우선 a태그의 id가 secondDivChild입니다.
이 id를 활용해서 부모를 찾아 스타일을 적용해보겠습니다.
parent()함수를 활용하였습니다.
parent()함수는 요소 자신의 부모요소를 찾습니다.
$("#secondDivChild").parent().attr("style", "border:3px solid blue;")혹시라도 secondDivChild를 기준으로
모든 부모요소를 알아볼 수 있는 함수는
parents()함수입니다.
//secondDivChild기준으로 모든 부모요소를 반환
$("#secondDivChild").parents()jquery로 부모 자식 요소를 찾아
스타일변경하는 것은 어렵지 않죠?
이번 포스팅은 여기까지입니다.
긴글 읽어주셔서 대단히 감사합니다.
'자바 웹 > front-end' 카테고리의 다른 글
| jQuery change함수 사용하기 (0) | 2023.01.18 |
|---|---|
| jQuery 라디오버튼 체크박스 사용하기 (0) | 2023.01.17 |
| jQuery each문 사용법 (0) | 2023.01.17 |
| jQuery this 사용법 (0) | 2023.01.11 |
| jQuery ajax 사용법 정리 (0) | 2023.01.09 |