.hasClass() 함수는 특정한 클래스가 있는지 찾습니다.
원문 링크 
http://api.jquery.com/hasClass/
- .addClass( className )
- className 찾고자 하는 클래스명
요소들(elements)들은 하나 이상의 클래스명을 가질 수 있습니다. HTML 은 띄어쓰기(space)로 클래스명을 구분합니다.
.hasClass() 함수는 클래스명이 일치하는 것이 있을 경우 true를 반환합니다. 여러개가 같이 사용된 클래스에 속해 있을 경우에도 같은 결과를 나타냅니다. 위의 HTML을 아래 예제와 같이 하면 true가 반환됩니다.
foo 와 bar 가 같이 쓰였지만 하나만 만족해도 true가 됩니다. 아래도 마찬가지 예제입니다.
하지만, 아래 예제는 false 를 반환합니다.
예 제
p 태그 중에 "selected" 클래스가 있는지 확인해서 true, false를 구분해서 div 에 추가해 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.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>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>
</body>
</html>
미리보기
잠깐 설명드리자면 .append 함수로 div 에 무엇인가를 추가하고 있습니다. p:first는 선택자는 p 태그 요소들중 첫번째 요소를 선택하라는 선택자입니다. 그 요소에 selected 클래스가 있는지 여부를 알아내요(hasClass) hasClass 함수가 리턴하는 값(true,false)를 문자열로 변환하여(toString) div 콜론 뒤에 추가해 주게 됩니다.
그래서 결과를 보시면 제일 위가 false, 두번째가 true, 세번째는 적어도 하나의 selected 클래스를 가진 p 태그가 존재하기 때문에 true가 반환되어 있는 것을 보실 수 있습니다.
복잡하게 이어놔서 어렵게 보이지만 순서대로 따라가시면 그리 어려운 내용이 아닙니다. 차근히 보세요~
hasClass로 해당 클래스를 확인하는 방법은 기억해 놓는 것이 좋을것 같네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 클래스 토글하기, toggleClass (5) | 2011.03.15 |
|---|---|
| jQuery API 정복 - 클래스 제거, removeClass() (2) | 2011.03.14 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.03.11 |
| jquery API 정복 - innerHTML 과 같은 표현, html() (10) | 2011.03.10 |
| jQuery API 정복 - attr(), 속성을 제어하기 (2) | 2011.02.25 |
| jQuery API 정복 - addClass(), 클래스 추가하기 (5) | 2011.02.25 |
| jQuery API 정복 - 눈에 보이는 요소 찾기 : visible (5) | 2011.02.24 |
| jQuery API 정복 - text 박스 찾기 : text (3) | 2011.02.24 |