Phương thức removeClass không hoạt động jquery

Question

Tôi đang có một vùng chứa div chính với 4 div ẩn bên trong nó (tôi đã tạo một lớp trong css với display: none và thêm nó vào mỗi div bên trong), div chính đọc giá trị từ danh sách thả xuống và theo giá trị đọc, hãy tiết lộ rằng nhiều div.

<div id="ddlContainer"> 
      <div id="div1" class="hide"> 
       <center>Select option:</center> 
       <select id="ddl1"> 
         <!--options are added here--> 
       </select> 
      </div> 
      <div id="div2" class="hide"> 
       <center>Select option:</center> 
       <select id="ddl2"> 
         <!--options are added here--> 
       </select> 
      </div> 
      <div id="div3" class="hide"> 
       <center>Select option:</center> 
       <select id="ddl3"> 
         <!--options are added here--> 
       </select> 
      </div> 
      <div id="div4" class="hide"> 
       <center>Select option:</center> 
       <select id="ddl4"> 
         <!--options are added here--> 
       </select> 
      </div> 
     </div> 

Nhưng removeClass không hoạt động đối với tôi.

var diff, NumofHiddenDDLs = $("#ddlContainer").children().filter("[class=hide]"); 
     if (ReadValue > NumofHiddenDDLs.length) { 
      diff = 1; 
     } 
     else { 
      diff = 2; 
     } 
     if (diff == 1) { 
      //TODO add class hide to shown divs 
     } 
     else { 
      for (var i = 0; i < ReadValue; i++) 
       ($("#ddlContainer").children()[i]).removeClass("hide"); 
     } 

Bất cứ ai có thể cho tôi biết tôi đang làm gì sai? Cảm ơn

Answer 1

Bạn cần thêm một $:

$($("#ddlContainer").children()[i]).removeClass("hide"); 

$("#ddlContainer").children()[i] này sẽ trả lại con thứ i của phần tử với id ddlContainer, mà sẽ sẽ là một yếu tố html và không phải là một đối tượng jQuery. Vì vậy, bạn muốn có quyền truy cập vào các phương thức jQuery. Bằng cách gói này với một số $, bạn sẽ có một đối tượng jQuery và bạn sẽ có quyền truy cập vào phương thức removeClass. Một cách khác để đạt được kết quả tương tự là sử dụng câu trả lời Satpal, trong đó thay vì truy cập vào mảng trẻ em có chỉ mục để sử dụng phương thức eq và để có đối tượng jQuery chứa phần tử bạn muốn .

Answer 2

Vấn đề với việc triển khai của bạn là ($("#ddlContainer").children()[i]) trả về phần tử DOM và chúng không có phương thức removeClass().

Bạn nên sử dụng .eq(index) để có được những phần tử mong muốn sau đó sử dụng removeClass()

$("#ddlContainer").children().eq(i).removeClass("hide"); 

Answer 3

Bạn có thể tận dụng lt chọn và loại bỏ vòng lặp for -

$("#ddlContainer").children(":lt(" + ReadValue + ")").removeClass("hide"); 

Check-out dưới phiên bản demo mà tôi có ẩn lớp CSS (với màu nền màu đỏ) và xóa lớp đó cho chỉ mục nhỏ hơn 3 -

$(function(){ 
 
    $("#ddlContainer").children(":lt(3)").removeClass("hide"); 
 
});

.hide { 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ddlContainer"> 
 
      <div id="div1" class="hide"> 
 
       <center>Select option:</center> 
 
       <select id="ddl1"> 
 
         <!--options are added here--> 
 
       </select> 
 
      </div> 
 
      <div id="div2" class="hide"> 
 
       <center>Select option:</center> 
 
       <select id="ddl2"> 
 
         <!--options are added here--> 
 
       </select> 
 
      </div> 
 
      <div id="div3" class="hide"> 
 
       <center>Select option:</center> 
 
       <select id="ddl3"> 
 
         <!--options are added here--> 
 
       </select> 
 
      </div> 
 
      <div id="div4" class="hide"> 
 
       <center>Select option:</center> 
 
       <select id="ddl4"> 
 
         <!--options are added here--> 
 
       </select> 
 
      </div> 
 
     </div>

Answer 4

Khi bạn có yếu tố thứ i, chỉ cần sử dụng js thuần túy chức năng classList

$("#ddlContainer").children()[i].classList.remove("hide")

Chú ý: bởi tình huống này, bạn sẽ không tạo ra đối tượng bổ sung trong trong mỗi bước