728x90
반응형
전체 형(이전) / 동생(다음) 선택자
기본형
$("요소 선택").prevAll()
$("요소 선택").nextAll()
<script>
$(function(){
var style_1={
"background-color":"pink",
"border":"2px solid #f00"
}
var style_2={
"background-color":"#ff0",
"border":"2px dashed #f00"
}
$(".txt").prevAll()
.css(style_1);
$(".txt").nextAll()
.css(style_2);
});
</script>
</head>
<body>
<div id="wrap">
<h1>형제 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>$(".txt").prevAll()
-> .txt 기준으로 이전에 오는 형제 요소 전부 (h1,p-내용1)
$(".txt").nextAll()
-> .txt 기준으로 다음에 오는 형제 요소 전부 (p-내용3, p-내용4)
전체 형제 요소 선택자
선택한 요소의 모든 형제 요소를 선택합니다.
$("요소 선택").siblings();
<script>
$(function(){
var style_1={
"background-color":"pink",
"border":"2px solid #f00"
}
$(".txt").siblings()
.css(style_1);
});
</script>
</head>
<body>
<div id="wrap">
<h1>형제 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>.txt인 요소를 기준으로 전체 형제요소에 css가 적용 되었습니다.
범위 제한 전체 형/동생 요소 선택자
$("요소 선택").prevUntil("범위 제한 요소 선택")
$("요소 선택").nextUntil("범위 제한 요소 선택")
<script>
$(function(){
var style_1={
"background-color":"pink",
"border":"2px solid #f00"
}
$(".txt3").prevUntil(".title")
.css(style_1);
$(".txt3").nextUntil(".txt6")
.css(style_1);
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">범위 제한 선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
</div>
</body>.txt3을 기준으로 .title을 제외한 형제 요소(내용1,2)
.txt3을 기준으로 .txt6을 제외한 동생 요소(내용4,5)
상위 요소 선택자
$("요소 선택").parents()
-> 선택요소 기준으로 상위 요소 모두 선택합니다.
$("요소 선택").parents("요소 선택")
-> 선택 요소 기준으로 상위 요소 중 선택한 요소만 선택합니다.
<script>
$(function(){
$(".txt1").parents()
.css({"border":"2px dashed #00f"});
$(".txt2").parents("div")
.css({"border":"2px solid #f00"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
<section>
<div>
<p class="txt2">내용</p>
</div>
</section>
</div>
</body>
.txt1의 전체 상위 요소에 파란 테두리
(html , body, .txt1의 부모요소인 section과 div)
.txt2의 전체 상위 요소 중 div에만 빨간 테두리
(#warp , .txt2 부모요소인 div)
가장 가까운 상위 요소 선택자
$("요소 선택").closest("요소 선택")
<script>
$(function(){
$(".txt1").closest("div")
.css({"border":"2px solid gray"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
</div>
</body>.txt1의 상위 요소 중 가장 가까운 div에 css가 적용 됩니다.
728x90
반응형
'IT > jQuery' 카테고리의 다른 글
| [jquery] jquery 배열 관련 메서드 (0) | 2020.02.04 |
|---|---|
| [jquery] jquery 탐색 선택자 (위치 탐색 선택자) (0) | 2020.02.03 |
| [jquery] jquery 선택자 (인접선택자, 부모요소 선택자, 하위요소 선택자) (0) | 2020.02.01 |
| [jquery] jquery 제이쿼리 선택자 (0) | 2020.01.20 |
| jquery CDN 가져오는 방법 (0) | 2019.12.20 |
댓글