728x90
Closest
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function () {
//parents(): 현재의 요소의 부모 요소에서 시작하여 탐색 - 선택한 요소를 기준으로 모든 상위 요소
//cloest(선택자): 현재 요소에서 시작하여 탐색 - 선택한 요소를 기준으로 가장 근접한 상위 요소 탐색
$("span").closest("div").css("color", "red")
$("span").parents("div").css("font-size", "40px")
});
</script>
</head>
<body>
<div>start
<div>
A
<div>
B
<p>
<span>C</span>
</p>
</div>
</div>
</div>
</body>
</html>
parent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function () {
//parnet(): 현재의 요소와 그 부모 요소 선택
$("p").parent().css("color", "red") //C와 C의 부모B + D
$("p").parent("#my").css("font-size", "40px") //D
});
</script>
</head>
<body>
<div>
A
<div>
B
<p>C</p>
</div>
</div>
<div id="my">
<p>D</p>
</div>
</body>
</html>
next&prev
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function () {
//next(): 같은 레벨 바로 뒤 요소 하나만 선택
// $("div").next().css("color", "red")
// $("div").next(".my").css("font-size", "40px") //div 다음에 my클래스가 있으면 적용
//prev(): 같은 레벨 바로 앞 요소 하나만 선택
// $("div").prev().css("color", "red")
// $("div").prev(".my").css("font-size", "40px") //div 다음에 my클래스가 있으면 적용
//siblings(): 같은 레벨 바로 앞과 뒤 요소 전부 선택
$(".my").siblings().css("color", "red")
$(".my").siblings("p").css("font-size", "40px") //div 다음에 my클래스가 있으면 적용
});
</script>
</head>
<body>
<div>A</div>
<p>A2</p>
<div>B</div>
<p class="my">B2</p>
<div>C</div>
<div class="my">C2</div>
<p>C3</p>
</body>
</html>'단순 코드 기록 > jQuery' 카테고리의 다른 글
| jQuery_has&Slice&Content&children (0) | 2024.02.14 |
|---|---|
| jQuery_리스트 위치&input태그&특정 문자열 찾기&속성 중첩 (0) | 2024.02.14 |
| jQuery_Tag&Label&Href&Constraint (0) | 2024.02.14 |
| jQuery_Arr (0) | 2024.02.14 |
| jQuery_CDN+Arr+List (0) | 2024.02.14 |