hasClass
문법
.hasClass(className)
요약
엘리먼트 중에서 하나라도 인자로 넘긴 클래스 값을 가지는지 여부를 알아낸다.
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| className | String | 필수 | 소유여부를 확인하려는 클래스명 |
반환값
boolean, 엘리먼트가 className을 가지고 있으면 true, 아니면 false를 리턴
예제1
id값이 mydiv인 엘리먼트가 foo라는 클래스명이 있는지 확인하는 예제, 결과는 true. hasClass에 bar를 넣어도 true를 리턴한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="mydiv" class="foo bar"></div>
<script type="text/javascript">
alert($('#mydiv').hasClass('foo'))
</script>
</body>
</html>
예제2
아래 예제는 p엘리먼트의 'selected' className이 포함되어 있는지 여부를 체크해서 div엘리먼트에 표시해주는 예제다.
자세한 설명은 주석을 참고
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
// p엘리먼트 중 문서에서 첫번째 등장하는 엘리먼트가 selected className을 가지고 있는지를 체크해서
// 있다면 true, 없다면 false를
// div엘리먼트 중 id값이 result1인 엘리먼트의 html contents에 추가한다.
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
// 선택한 엘리먼트 그룹이 여러개의 엘리먼트를 포함하고 있다면 그 중 첫번째 엘리먼트에 대한 hasClass 결과를 이용한다.
$("div#result3").append($("p").hasClass("selected").toString());
</script>
</body>
</html>
