최신 게시글(WEB)
HOME > WEB > 최신 게시글(WEB)
2018.09.30 / 21:50

.addClass 및 1.4 버젼 다른점

GAScripter
추천 수 164
  • .addClass( className )
  • className 특정 조건에 추가할 하나 이상의 클래스 명
  • .addClass( function(index, class) )
  • function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the element in the set and the old class value as arguments.(누가 해석 좀 해주세요.~~ ^^;;)


가장 중요한 것은 이 함수가 클래스를 대체하는 함수가 아니라는 것입니다. 단순히 클래스를 추가하는 기능만 가지고 있습니다.

하나 이상의 클래스를 추가하려면 띄어쓰기를 사용하면 됩니다. 아래 예시를 보시죠.

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



이 함수는 .removeClass()와 자주 같이 사용됩니다. 만약 클래스의 바꿔치기를 원하시면 이 두가지 함수를 아래와 같이 사용하시면 됩니다.

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

설명드리자면 myClass 와 noClass를 없앤 후에 yourClass 를 추가하는 구문이 되겠습니다.

jQuery 1.4 버젼 이후로 .addClass 는 클래스명을 반환해 주는 내부함수를 사용할 수 있게 되었습니다.

$('ul li:last').addClass(function() {

  return 'item-' + $(this).index();

});


사용할수있다는 점이다

예제 
이 예제는 보니까 firefox에서는 동작이 하는데 다른데에서는 동작이 되는것 같지가 않다
<!DOCTYPE html>

<html>

<head>

  <style>

    div { background: white }

    .red { background: red }

    .red.green { background: green }

  </style>

  <script src="http://code.jquery.com/jquery-1.5.js"></script>

</head>

<body>

  

 <div>This div should be white</div>

 <div class="red">This div will be green because it now has the 'active' 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(i,class) {

    if ( i === 1 ) {

       $('p').text('There is one green div');

        class += ' green';

    }

    

    return class;

});

</script>


</body>

</html>



아~ 등호 3개 (===)가 구문 중에 있습니다. 이 연산자의 이름은 동치라고 하구요. 변수의 타입과 값이 모두 일치할 경우에만 True 입니다



출처: http://uip80.tistory.com/entry/addClass-및-14-버젼-다른점?category=317570 [여명의집]