jquery .parent .next .show nicht funktioniert

Question

Ich habe folgende HTML:

<tr> 
    <td> 
     <input type="checkbox" class="showFilter" /> Ranks 
    </td> 
</tr> 
<tr class="hideFilter"> 
    <td class="textBold"> 

     <select class="ranks singleListBox" id="select1" name="selectListFilterRank"> 
      <option value="all">All</option> 
       <% Do While NOT rsGetRanks.EOF %> 
          <option value="<%= rsGetRanks("RankID") %>"><%= rsGetRanks("Description") %></option> 

       <% 
         rsGetRanks.MoveNext 
        Loop   
       %>     
     </select> 
    </td> 
</tr> 

ich folgende JQuery haben:

$('.showFilter').change(function() { 
       if(this.checked) { 
        $(this).parent('tr').next().show(); 
       } else { 
        $(this).parent('tr').next().hide(); 
       } 

      }); 

ich es so zu machen, versuche, wenn sie auf das Kontrollkästchen klicken , wird es das Elternteil <tr> finden, zum nächsten <tr> gehen und dieses <tr> zeigen.

Dieser Teil funktioniert nicht, es wird nicht die <tr> aus irgendeinem Grund angezeigt.

Alles, was hideFilter macht, ist das Einstellen der Anzeige auf keine, kein anderes CSS sollte dies derzeit durcheinander bringen.

Answer 1

parent() wählt das direkte übergeordnete Element aus, das eine <td> ist.
Verwenden Sie .closest('tr'), um die übergeordnete Zeile auszuwählen.

$('.showFilter').change(function() { 
    $(this).closest('tr').next().toggle(this.checked); 
}); 

Answer 2

.parent anstelle von ('tr') verwenden .parents ('tr')

:

Auch kann der Code noch kürzere .toggle() mit geschrieben werden

• Parent ([query]) geht nur 1 Ebene nach oben.
• Parents ([query]) durchsucht alle ParentNodes, bis Sie gefunden haben, wonach Sie suchen.

Answer 3

Die Eltern Ihrer Eingabe ist ein TD nicht TR Verwendung parents() oder closest()

http://api.jquery.com/closest/

http://api.jquery.com/parents/