テーブル行を特定のパラメータで表示する方法は？

Question

私はテーブルの行を持っています。

<tr class='tr_h' title='fruits'><td>This is fruits row</td></tr> 
<tr class='tr_d' title='fruits'><td>Apple</td></tr> 
<tr class='tr_d' title='fruits'><td>Chicken</td></tr> 
<tr class='tr_d' title='fruits'><td>Beef</td></tr> 
<tr class='tr_d' title='fruits'><td>Pea</td></tr> 
<tr class='tr_h' title='meats'><td>This is meat row</td></tr> 
<tr class='tr_d' title='meats'><td>Apple</td></tr> 
<tr class='tr_d' title='meats'><td>Chicken</td></tr> 
<tr class='tr_d' title='meats'><td>Beef</td></tr> 
<tr class='tr_d' title='meats'><td>Pea</td></tr> 
<tr class='tr_h' title='nuts'><td>This is nuts row</td></tr> 
<tr class='tr_d' title='nuts'><td>Apple</td></tr> 
<tr class='tr_d' title='nuts'><td>Chicken</td></tr> 
<tr class='tr_d' title='nuts'><td>Beef</td></tr> 
<tr class='tr_d' title='nuts'><td>Pea</td></tr> 

テーブルの行をタイトル値で表示しようとしました。私の望むテーブル：

<tr class='tr_h' title='fruits'><td>This is fruits row</td></tr> 
<tr class='tr_d' title='fruits'><td>Apple</td></tr> 
<tr class='tr_h' title='meats'><td>This is meat row</td></tr>  
<tr class='tr_d' title='meats'><td>Chicken</td></tr> 
<tr class='tr_d' title='meats'><td>Beef</td></tr>  
<tr class='tr_h' title='nuts'><td>This is nuts row</td></tr> 
<tr class='tr_d' title='nuts'><td>Pea</td></tr> 

この行はPHPコードで生成され、それとまったく同じように表示されます。私はテーブルをソートするためにjQueryを使ってみました。しかし、それは期待どおりに動作していません：

$('.tr_h').each(function(){ 
    var id_m = $(this).attr('title') 

    $('.tr_d').each(function(){ 
      var id_d = $(this).attr('title'); 

      if(id_d != id_m){ $(this).css('display','none'); } 
      else{ $(this).css('display','block')}; 
    }); 
}); 

PS：タイトル属性を使用して私について私のことを言ってはいけません。ありがとうございました。

Answer 1

私はそれを自分自身を説明することはできません...

しかし、このjQueryのコードは、あなたが望んでいただけのように...何とか...動作するはずです：

var pos=0; 
$('.tr_h').each(function(i) { 
    var yea = $(this).nextUntil('.tr_h'); 
    yea.not(yea.slice(pos,pos+1+(i==1))).hide(); 
    pos+=(i==1); 
    pos++; 
}); 

Answer 2

別のjQueryのは、私が発見：

$('.tr_d').each(function(){ 
    var id_d = $(this).attr('title') 
    var id_m = $(this).closest('tbody').find('.tr_h').attr('title'); 

    if(id_d != id_m){$(this).css('display','none'); } 
});