removeClass方法不工作jquery

我有一個主要的div容器，裏面有4個隱藏的div（我在css中用display：none創建了一個類，並將它添加到每個內部div），主div讀取從下拉列表中取值並根據讀取的值取消隱藏多個div。removeClass方法不工作jquery

<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>

但removeClass不適用於我。

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"); 
     }

有誰能告訴我我在做什麼錯嗎？感謝

來源

2016-08-22 Jadenkun

只需使用'var diff = $（'＃ddlContainer> .hide'）。length; if（diff === 1）{TODO} else {$（'＃ddlContainer> .hide'）。removeClass（'hide'）}' – Tushar

你需要一個額外的$：

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

這$("#ddlContainer").children()[i]將返回元素的第i個孩子ID ddlContainer，這將是一個HTML元素，而不是一個jQuery對象。所以你想要訪問jQuery方法。通過將此包裝爲$，您將擁有一個jQuery對象，並且您將有權訪問removeClass方法。

達到相同的結果的另一種方法是使用Satpal答案，在其中，而不是訪問孩子的數組索引來利用eq方法，並得到一個jQuery對象，包含你想要的元素。

來源

2016-08-22 10:20:00 Christos

**爲什麼？**。首先獲取DOM元素，然後再次包裝在jQuery中。只要使用'$（'＃ddlContainer'）。children（）。eq（i）.removeClass（'hide'）;'就像在其他答案中一樣。 – Tushar

@Tushar你是血腥的權利。然而，我試圖指出什麼是最小的變化是需要的。我也會在我的回答中包括這一點。謝謝：） – Christos

問題與您的實施是($("#ddlContainer").children()[i])返回DOM元素，他們沒有removeClass()方法。

您應該使用.eq(index)以獲得所需的元素，然後使用removeClass()

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

來源

2016-08-22 10:20:27 Satpal

您可以使用lt選擇和刪除for循環 -

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

退房演示版本在那裏我有以下隱藏CSS類（使用背景顏色RED）並將其刪除以獲得小於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>

來源

2016-08-22 10:22:11

當你有第i個元素，只需使用純JS功能班級名冊

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

聲明：此情況下，你不會產生額外的對象中的每個步驟

來源

2016-08-22 10:53:35 dwilda

removeClass方法不工作jquery

回答

相關問題