数の多い順にランキングし、table
で表示します。
数が同数(同率順位)の場合は順位のセルを結合して表示しようと思いJSでそのための処理を書いたのですが、なぜか一カ所だけうまくいきません。以下にコードを載せるので、問題と思われる箇所を教えてください。
html
1<div class="rank"> 2 <p>ランク</p> 3 <table> 4 <tr> 5 <th>順位</th> 6 <th>国名</th> 7 <th>数</th> 8 </tr> 9 <% @nations.each_with_index do |f,i| %> 10 <tr class="table-tr"> 11 <td class="table-rank"><%= i+1 %></td> 12 <td class="table-name"><%= link_to f.name, tag_path(f.name) %></td> 13 <td class="table-count"><%= f.count %></td> 14 </tr> 15 <% end %> 16 </table> 17</div> 18
js
1$(function() { 2 var counter = 0; 3 var text =""; 4 var target=""; 5 $($('.table-tr').get().reverse()).each(function(){ 6 if ($(this).children('.table-count').text() == text) { 7 counter++; 8 if(target !="") 9 target.remove(); 10 } 11 else { 12 if(target !="") 13 target.attr('rowSpan', counter); 14 counter=1; 15 } 16 text = $(this).children('.table-count').text(); 17 target = $(this).children('.table-rank'); 18 }); 19});
結果:
ランク
順位 | 国名 | 数 |
---|---|---|
1 | アメリカ | 20 |
中国 | 20 | |
3 | フランス | 18 |
4 | イギリス | 16 |
5 | オランダ | 15 |
カナダ | 15 | |
7 | イタリア | 12 |
8 | オーストラリア | 11 |
インド | 11 | |
10 | ブラジル | 8 |
「アメリカ」と「中国」は同数のため、「中国」の.table-rank
はちゃんとremoveされてはいるのですが、ご覧の通りずれてしまいます。5位や8位のように上下でくっつきません(5位と8位の実際の見た目は、セルが結合され順位が上下中央にちゃんと寄ります)。
なぜ1位だけ機能しないのでしょうか?どなたか詳しい方、JSの記述で問題と思われる箇所をご指摘ください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/20 00:18