jqueryは同じクラスの特定の要素を非表示にします

Question

異なるクラスのtdsを持つ表があります。 クラスが変更されるまで、特定のクラスを含むすべての要素を選択する必要があります。

例：

<table class="TableClass"> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td class="I">&nbsp;TOP</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>1.1</td> 
      <td class="II">&nbsp;First</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>1.1.1</td> 
      <td class="III">&nbsp;asdf</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>1.1.2</td> 
      <td class="III">&nbsp;asdf</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>1.2</td> 
      <td class="II">&nbsp;Second</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td>1.2.1</td> 
      <td class="III">&nbsp;Anmeldename</td> 
      <td>&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

私は「セカンド」ではないの後にクラスを持つすべての要素「III」は非表示にする必要があり、「第一」が、クラス「III」を持つ要素をクリックします。

Answer 1

これは私が試みたものです。これは最適化されていないかもしれませんが、私のために働いています。

<script> 
 
var flg = 0;  
 
$("tr").find("td").each(function() { 
 
    if ($(this).attr('class') != '' && $(this).attr('class') != undefined) {    
 
     if ($(this).hasClass('III')) { 
 
      if (flg != 2) { 
 
       $(this).css('background-color', 'red'); 
 
       flg = 1; 
 
      } 
 
     } else { 
 
      if (flg == 1) { 
 
       flg = 2; 
 
      } 
 
     } 
 
    } 
 
}); 
 
</script>