대체 클래스 이름은 JQuery와

Question

에서 작동하지 않는 나는 HTML 세그먼트

for (i = 0; i < 3; i++) { 
 
     if ($("div.mm-panels").children()[i].getAttribute("id") == "m2") { 
 
      var a = $("div.mm-panels").children()[i].getAttribute("class"); 
 
      console.log(a); 
 
      var f = a.replace(a, "mm-panel mm-hasnavbar mm-opened"); 
 
      alert("class name chnge to : " + f); 
 

 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mm-panels"> 
 
     <div class="mm-panel mm-hidden mm-hasnavbar" id="m0"></div> 
 
     <div class="mm-panel mm-hasnavbar mm-opened" id="m1"></div> 
 
     <div class="mm-panel mm-hidden mm-hasnavbar" id="m2"></div> 
 
    </div>

을 가지고 있고 내가 ID = "m2"이 mm 패널의 아이를 찾아 클래스를 대체 할 이름은 "mm-panel mm-hasnavbar mm-opened"이고 다른 자식은 클래스 이름을 "mm-panel mm-hidden mm-hasnavbar"로 대체합니다.

하지만 대체되지 않습니다. 내가 어떻게 해 ?

Answer 1

replace은 "a"문자열 만 바꾸고 새 문자열 "f"에 저장합니다.

는 jQuery를 태그에 사용 된 바와 같이, 요소의 클래스를 사용하면 클래스를 제거하는 클래스와 .removeClass()을 추가 .addClass()을 사용할 수 있습니다 $("div.mm-panels").children()[i].setAttribute("class",f)

for (i = 0; i < 3; i++) { 
 
     if ($("div.mm-panels").children()[i].getAttribute("id") == "m2") { 
 
      var a = $("div.mm-panels").children()[i].getAttribute("class"); 
 
      var f = a.replace(a, "mm-panel mm-hasnavbar mm-opened"); 
 
      $("div.mm-panels").children()[i].setAttribute("class",f) 
 
     } else { 
 
      var a = $("div.mm-panels").children()[i].getAttribute("class"); 
 
      var f = a.replace(a, "mm-panel mm-hidden mm-hasnavbar"); 
 
      $("div.mm-panels").children()[i].setAttribute("class",f) 
 
     } 
 
     
 
     
 
     $("div.mm-panels").children()[i].innerText = $("div.mm-panels").children()[i].getAttribute("class") 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mm-panels"> 
 
     <div class="mm-panel mm-hidden mm-hasnavbar" id="m0"></div> 
 
     <div class="mm-panel mm-hasnavbar mm-opened" id="m1"></div> 
 
     <div class="mm-panel mm-hidden mm-hasnavbar" id="m2"></div> 
 
    </div>

Answer 2

를 사용하여 설정합니다. 이 시도 :`s`가

$("div.mm-panels").find(":not(div#md2)").removeClass("mm-panel mm-hasnavbar mm-opened").addClass("mm-panel mm-hidden mm-hasnavbar"); 
 
$("div.mm-panels").find("div#m2").removeClass("mm-panel mm-hidden mm-hasnavbar").addClass("mm-panel mm-hasnavbar mm-opened");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mm-panels"> 
 
    <div class="mm-panel mm-hidden mm-hasnavbar" id="m0">m0</div> 
 
    <div class="mm-panel mm-hasnavbar mm-opened" id="m1">m1</div> 
 
    <div class="mm-panel mm-hidden mm-hasnavbar" id="m2">m2</div> 
 
</div>