반응형
안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.
jQuery의 .length 사용법
jQuery의 .length는 선택한 요소의 개수를 반환하는 기능을 합니다.
간단한 예제로 버튼을 클릭시 .length가 어떻게 작동하는지 알아봅시다.
<!DOCTYPE html>
<html>
<head>
<title>length 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 스크립트 추가 부분
</script>
</head>
<body>
<div>
<ul>
<li>대한민국</li>
<li>영국</li>
<li>프랑스</li>
<li>일본</li>
<li>브라질</li>
<li>미국</li>
</ul>
</div>
<button>테스트 버튼</button>
</body>
</html>
1. 선택한 요소의 개수를 반환
<script>
$(document).ready(function() {
$("button").click(function() {
var lis = $("li").length;
alert("선택한 li 요소의 개수 : " + lis);
});
});
</script>테스트 버튼을 클릭하면 'li' 요소의 개수를 alert를 통해 알려줍니다.
2. 선택한 요소의 존재 여부를 파악
<script>
$(document).ready(function() {
$("button").click(function() {
var lis = $("li").length;
if (lis > 0) {
alert("li 요소가 존재합니다.");
} else {
alert("li 요소가 존재하지 않습니다.");
}
});
});
</script>테스트 버튼을 클릭하면 선택한 'li' 요소들을 선택하여 'lis' 변수에 저장하고,
선택한 요소의 개수가 0보다 크면 "li 요소가 존재합니다."라는 메시지를 출력하고,
그렇지 않은 경우에는 "li 요소가 존재하지 않습니다."라는 메시지를 출력합니다.
반응형
'IT 소스 > jQuery' 카테고리의 다른 글
| [jQuery] .parent() - 부모 요소를 선택 (0) | 2024.02.27 |
|---|---|
| [jQuery] .clone() - 요소를 복제 (0) | 2024.02.22 |
| [jQuery] .scrollTop() - 스크롤바 위치 조작 메서드 (0) | 2023.03.07 |
| [jQuery] .ajax() - 비동기적으로 데이터 처리 메서드 (0) | 2023.02.25 |
| [jQuery] .empty() - 선택한 요소의 내용을 지우는 메서드 (0) | 2023.02.22 |