자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 02:55
자바스크립트에서 jQuery의 .siblings() 메서드
jQuery의 `.siblings()` 메서드는 선택한 요소의 형제 요소를 반환합니다. 형제 요소란 선택한 요소와 같은 부모 요소를 공유하는 다른 요소를 의미합니다.
.siblings() 메서드의 사용법
`.siblings()` 메서드는 선택한 요소의 형제 요소를 반환하는 메서드입니다. 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.
이 HTML 구조에서 `.siblings()` 메서드를 사용하여 첫 번째 항목의 형제 요소를 반환할 수 있습니다.
이 코드는 `.item:first` 요소의 형제 요소를 반환합니다. 결과는 두 번째 항목과 세 번째 항목이 포함된 jQuery 객체가 됩니다.
.siblings() 메서드의 옵션
`.siblings()` 메서드는 다음과 같은 옵션을 제공합니다.
- `.siblings(\'selector\')`: 선택한 요소의 형제 요소를 반환합니다. 예를 들어, `.siblings(\'.item\')`은 선택한 요소의 `.item` 클래스를 가진 형제 요소를 반환합니다.
- `.siblings(index)`: 선택한 요소의 형제 요소를 반환합니다. 예를 들어, `.siblings(1)`은 선택한 요소의 두 번째 형제 요소를 반환합니다.
예제
다음 예제에서는 `.siblings()` 메서드를 사용하여 HTML 구조에서 형제 요소를 반환하는 방법을 보여줍니다.
이 예제에서는 `.siblings()` 메서드를 사용하여 HTML 구조에서 형제 요소를 반환하는 방법을 보여줍니다. 첫 번째 항목의 형제 요소를 반환하는 코드는 `.item:first` 요소의 형제 요소를 반환합니다. 두 번째 항목의 형제 요소를 반환하는 코드는 `.item:nth-child(2)` 요소의 형제 요소를 반환합니다. 세 번째 항목의 형제 요소를 반환하는 코드는 `.item:last` 요소의 형제 요소를 반환합니다.
결론
`.siblings()` 메서드는 선택한 요소의 형제 요소를 반환하는 메서드입니다. 이 메서드는 선택한 요소의 형제 요소를 반환하는 데 사용할 수 있습니다. `.siblings()` 메서드는 선택한 요소의 형제 요소를 반환하는 데 사용할 수 있습니다. 이 메서드는 선택한 요소의 형제 요소를 반환하는 데 사용할 수 있습니다.
[PHP] pi - pi 값 가져오기
[PHP] ord - 문자열의 첫 번째 바이트를 0~255 사이의 값으로 변환
[PHP] min - 가장 낮은 값 찾기
[PHP] log - 자연로그
jQuery .siblings(): 형제 요소 선택하기
- 나우호스팅 21일 전 2025.02.22 02:55
-
16
0
jquery .siblings() 자바스크립트에서 jQuery의 .siblings() 메서드
jQuery의 `.siblings()` 메서드는 선택한 요소의 형제 요소를 반환합니다. 형제 요소란 선택한 요소와 같은 부모 요소를 공유하는 다른 요소를 의미합니다.
.siblings() 메서드의 사용법
`.siblings()` 메서드는 선택한 요소의 형제 요소를 반환하는 메서드입니다. 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.
#hostingforum.kr
html
<div class="container">
<p class="item">첫 번째 항목</p>
<p class="item">두 번째 항목</p>
<p class="item">세 번째 항목</p>
</div>
이 HTML 구조에서 `.siblings()` 메서드를 사용하여 첫 번째 항목의 형제 요소를 반환할 수 있습니다.
#hostingforum.kr
javascript
$('.item:first').siblings();
이 코드는 `.item:first` 요소의 형제 요소를 반환합니다. 결과는 두 번째 항목과 세 번째 항목이 포함된 jQuery 객체가 됩니다.
.siblings() 메서드의 옵션
`.siblings()` 메서드는 다음과 같은 옵션을 제공합니다.
- `.siblings(\'selector\')`: 선택한 요소의 형제 요소를 반환합니다. 예를 들어, `.siblings(\'.item\')`은 선택한 요소의 `.item` 클래스를 가진 형제 요소를 반환합니다.
- `.siblings(index)`: 선택한 요소의 형제 요소를 반환합니다. 예를 들어, `.siblings(1)`은 선택한 요소의 두 번째 형제 요소를 반환합니다.
예제
다음 예제에서는 `.siblings()` 메서드를 사용하여 HTML 구조에서 형제 요소를 반환하는 방법을 보여줍니다.
#hostingforum.kr
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery .siblings() 메서드</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid black;
padding: 10px;
}
.item {
width: 100%;
height: 30px;
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<p class="item">첫 번째 항목</p>
<p class="item">두 번째 항목</p>
<p class="item">세 번째 항목</p>
</div>
<script>
// 첫 번째 항목의 형제 요소를 반환합니다.
console.log($('.item:first').siblings());
// 두 번째 항목의 형제 요소를 반환합니다.
console.log($('.item:nth-child(2)').siblings());
// 세 번째 항목의 형제 요소를 반환합니다.
console.log($('.item:last').siblings());
</script>
</body>
</html>
이 예제에서는 `.siblings()` 메서드를 사용하여 HTML 구조에서 형제 요소를 반환하는 방법을 보여줍니다. 첫 번째 항목의 형제 요소를 반환하는 코드는 `.item:first` 요소의 형제 요소를 반환합니다. 두 번째 항목의 형제 요소를 반환하는 코드는 `.item:nth-child(2)` 요소의 형제 요소를 반환합니다. 세 번째 항목의 형제 요소를 반환하는 코드는 `.item:last` 요소의 형제 요소를 반환합니다.
결론
`.siblings()` 메서드는 선택한 요소의 형제 요소를 반환하는 메서드입니다. 이 메서드는 선택한 요소의 형제 요소를 반환하는 데 사용할 수 있습니다. `.siblings()` 메서드는 선택한 요소의 형제 요소를 반환하는 데 사용할 수 있습니다. 이 메서드는 선택한 요소의 형제 요소를 반환하는 데 사용할 수 있습니다.
이 게시물에 포함된 라이브러리
[NGINX] index - 기본 인덱스 파일을 설정합니다.[PHP] pi - pi 값 가져오기
[PHP] ord - 문자열의 첫 번째 바이트를 0~255 사이의 값으로 변환
[PHP] min - 가장 낮은 값 찾기
[PHP] log - 자연로그
댓글목록
등록된 댓글이 없습니다.