잡담
앞서서 jquery에 children과 parent에 대해서 배워보았는데요, 비슷한 개념의 내용을 오늘 다룰 예정입니다. 이론을 설명하는 거보다 예제로 보는 것이 훨씬 이해하기 쉽기 때문에 대부분 예제로 대체될 거 같습니다.
1.prev
jQuery의 .prev() 메서드는 선택한 요소의 이전 형제 요소를 선택하는 데 사용됩니다. 이 메서드는 DOM 트리에서 한 단계 위로 이동하여 선택한 요소의 이전 형제 요소를 찾습니다. 아래는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#li2").prev().css("backgroundColor","red")
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1</li>
<li id="li2">리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</body>
</html>See the Pen jQuery prev by 이현석 (@loxshqac-the-styleful) on CodePen.
2. prevAll
jQuery의. prevAll() 메서드는 선택한 요소의 이전 형제 요소들을 모두 선택하는 데 사용됩니다. 이 메서드는 DOM 트리에서 선택한 요소의 바로 위에 있는 모든 형제 요소를 찾습니다. 아래는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#li4").prevAll().css("backgroundColor","red")
//prev - previous , prevAll - previous All
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li id="li4">리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</body>
</html>See the Pen jQuery prevAll by 이현석 (@loxshqac-the-styleful) on CodePen.
3. PrevUntil
jQuery의. prevUntil() 메서드는 선택한 요소의 이전 형제 요소들을 선택하는 데 사용됩니다. 그러나. prevUntil()은 특정 선택기를 만족하는 요소를 만날 때까지 선택합니다. 이 메서드는 DOM 트리에서 선택한 요소의 바로 위에 있는 형제 요소를 찾습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#li5").prevUntil("#li2").css("backgroundColor","red")
//previoust Until
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1</li>
<li id="li2">리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li id="li5">리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</body>
</html>See the Pen jQuery prevUntil by 이현석 (@loxshqac-the-styleful) on CodePen.
4. next
jQuery의. next() 메서드는 선택한 요소의 다음 형제 요소를 선택하는 데 사용됩니다. 이 메서드는 DOM 트리에서 한 단계 아래로 이동하여 선택한 요소의 다음 형제 요소를 찾습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#li5").next().css("backgroundColor","red")
//next, nextAll, nextUntil
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1</li>
<li id="li2">리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li id="li5">리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</body>
</html>See the Pen next by 이현석 (@loxshqac-the-styleful) on CodePen.
5. nextAll
jQuery의. nextAll() 메서드는 선택한 요소의 다음 형제 요소들을 모두 선택하는 데 사용됩니다. 이 메서드는 DOM 트리에서 선택한 요소의 바로 아래에 있는 모든 형제 요소를 찾습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#li2").nextAll().css("backgroundColor","red")
//next, nextAll, nextUntil
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1</li>
<li id="li2">리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</body>
</html>See the Pen nextAll by 이현석 (@loxshqac-the-styleful) on CodePen.
6. nextUntil
jQuery의. nextUntil() 메서드는 선택한 요소의 다음 형제 요소들을 선택하는 데 사용됩니다. 그러나. nextUntil()은 특정 선택기를 만족하는 요소를 만날 때까지 선택합니다. 이 메서드는 DOM 트리에서 선택한 요소의 바로 아래에 있는 형제 요소를 찾습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#li2").nextUntil("#li5").css("backgroundColor","red")
//next, nextAll, nextUntil
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1</li>
<li id="li2">리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li id="li5">리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</body>
</html>See the Pen nextUntil by 이현석 (@loxshqac-the-styleful) on CodePen.
7. siblings
jQuery의. siblings() 메서드는 선택한 요소의 모든 형제 요소를 선택하는 데 사용됩니다. 이 메서드는 DOM 트리에서 선택한 요소의 부모 요소 아래에 있는 모든 형제 요소를 찾습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#li4").siblings().css("backgroundColor","red")
//siblings - 형제,자매
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li id="li4">리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</body>
</html>See the Pen jQuery siblings by 이현석 (@loxshqac-the-styleful) on CodePen.
글을 마치며
오늘도 예제만 잔뜩 적은 거 같네요. 그래도 이론보다 예제가 확실히 이해하기 편할 거라고 생각합니다. 남은 jQuery 기본이 많습니다. 열심히 달려봅시다. 감사합니다.
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery 사용법 (0) | 2024.04.26 |
|---|---|
| [Java Script] jQuery / even, odd, lt, gt, eq (1) | 2024.04.26 |
| [Java Script] jQuery / children, parent (0) | 2024.04.26 |
| [Java Script] jQuery / ready (0) | 2024.04.24 |
| [Java Script] jQuery / CSS (0) | 2024.04.24 |