jQuery 사전

jQuery API 레퍼런스를 번역한 것입니다.

jQuery 사전 jQuery API 레퍼런스를 번역한 것입니다.

hasClass

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>

참고

댓글

댓글 본문
작성자
비밀번호
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기