Jam's story

[jQuery] addClass(function(index, currentClassName) 본문

WEB/JQuery

[jQuery] addClass(function(index, currentClassName)

애플쩀 2022. 6. 14. 10:50

  div 요소 중에 클래스 red 속성을 가진 div를 찾아서 .green 설정 

index 와 currentClassName 위치가 바뀌면 안된다.
<script>
  

   $("div").addClass(function(index, currentClassName) {
    console.log(index + " / " + currentClassName);
    var className;

    if (currentClassName == "red") {
        className = "green";
    }
    return className;
});

 

 

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.14 10:42:42</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    div {    background: white;  }
    .red {    background: red;  }
    .red.green  {    background: green;  }
  </style>
</head>
<body>
<h3>ex08.html</h3>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
  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 요소 중에 클래스 red 속성을 가진 div를 찾아서 .green 설정 
  /*   //1
    $("div.red").addClass("green");

    //2
    $("body").find(".red").addClass(".green");
 */
    //3
   $("div").addClass(function(index, currentClassName) {
    console.log(index + " / " + currentClassName);
    var className;

    if (currentClassName == "red") {
        className = "green";
    }
    return className;
});
//index 와 currentClassName 위치가 바뀌면 안된다.
</script>
</body>
</html>
저작자표시 (새창열림)

'WEB > JQuery' 카테고리의 다른 글

[JQuery] 제이쿼리 객체에 함수 추가 하고 사용  (0) 2022.06.14
[JQuery] 입력값에 대한 유효성 검사하고 막기  (0) 2022.06.14
[JQuery] jQuery.each() - 배열을 인자값으로  (0) 2022.06.14
[JQuery] 남은시간 계산하여 표시  (0) 2022.06.14
[JQuery] on() , one(), off()  (0) 2022.06.14
'WEB/JQuery' Related Articles more
Comments