jQuery 사전

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

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

addClass

.addClass(className)

문법

 .addClass(className)

요약

선택된 엘리먼트 그룹 전체에 지정한 클래스 이름을 추가한다.

인자

인자명 데이터형 필수/옵션 설명
className String 필수 추가할 className

반환값

jQuery wrapper object

설명

이 메서드는 클래스를 교체하는 것이 아니라는 점에 유의해야 한다. 이 메서드는 클래스 값을 가지고 있는 엘리먼트에 단지 클래스를 추가할 뿐이다.

엘리먼트 세트에 한 번에 한 개 이상의 클래스를추가할 수 있다. 이 때 클래스 이름의 구분은 공백으로 한다. 방법은 다음과 같다. 아래의 예제는 p엘리먼트의 그룹에 속하는 모든 엘리먼트의 myClass, yourClass className을 제거한다.

$("p").addClass("myClass yourClass");

엘리먼트의 클래스를 하나에서 다른 것으로 바꾸려는 경우에 .removeClass() 메서드와 함께 이 메서드를 자주 사용한다. 다음의 예를 보자.

$("p").removeClass("myClass noClass").addClass("yourClass");

여기에서 myClass와 noClass 클래스가 모든 문단에서 제거되었다. 그리고 모든 문단에 yourClass가 추가되었다.

예제

p 엘리먼트 중 마지막으로 선택된 엘리먼트에 selected className을 추가

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <p>안뇽</p>
  <p>그리고</p>
  <p>바이바이</p>
 
<script>
  $("p:last").addClass("selected");
  </script>

</body>
</html>


.addClass(function(index, currentClass))

문법

 .addClass(function(index, currentClass))

요약

선택된 엘리먼트의 그룹에 function을 이용해 className을 추가한다.

인자

인자명 데이터형 필수/옵션 설명
function Funtion 필수 선택된 엘리먼트 각각에 클래스명을 추가하기 전에 이 함수가 호출 되고, 그 리턴값이 클래스명이 된다.

반환값

jQuery wrapper object

설명

선택된 엘리먼트의 그룹에 className을 추가한다. 이 때 내부적으로 개별적인 엘리먼트 그룹에 대한 암시적인 반복이 실행되면서 인자로 전달된 function이 호출된다. 이 함수가 리턴하는 값에 따라서 추가할 className이 달라진다. 복수의 className을 추가하려는 경우 공백으로 구분된 className 문자열을 전달하면 된다. 이 함수의 인자로 전달되는 index는 현재 실행되고 있는 엘리먼트가 엘리먼트 그룹 중에 몇번째에 해당하는지에 대한 정보를 의미한다. className은 현재 실행되고 있는 엘리먼트의 className 값을 의미한다. .addClass(className)에 비해서 보다 복잡한 className 추가 작업에 사용된다.

예제

아래 예제는 div 엘리먼트 그룹에 className을 추가하는 예제다. 이 때 인자로 function을 전달하는데 엘리먼트 중 className이 red인 엘리먼트에 한해서 className으로 green을 추가한다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" class.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;

    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }
 
    return addedClass;
  });
</script>

</body>
</html>
	

참고

댓글

댓글 본문
  1. ggoggoing
    우와 감사합니다!!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기