2

名前順に3列に表示したいカテゴリのリストがあります。私はcssを使用ulしていますli

li {
  float: left;
  width: 33%;
}

だから私は各カテゴリーをループすることができます。これは、注文という1つの問題を除いて正常に機能しています。リストをアルファベット順で列順に並べてほしい。実例として、AからGの7つのカテゴリがある場合、現在は次のようになります。

A  |  B  |  C
D  |  E  |  F
G  |

のように見せたい

A  |  D  |  G  
B  |  E  |
C  |  F  |

これを達成する方法はありますか？

4

3 に答える 3

2

これを乗り越えるには2つの方法があります。どちらも、リストを3つのグループにグループ化する必要があります。これは、を使用して実現できますがin_groups_of、グループに属する必要のある要素の数を渡す必要があります。

@categories = ('A'..'G').to_a

total_per_column = (@categories.size / 3.0).ceil
@categories = @categories.in_groups_of(3, false)

false不足している要素を埋めようとしないように合格する必要があります。つまり、最後のグループには「G」のみが含まれます。

次は2つのオプションです。

  1. ul左に浮いている3を使用します

    <% @categories.each do |categories| %>
  <ul>
   <% categories.each do |category| %>
     <li><%= category %></li>
   <% end %>
  </ul>
<% end %>

  2. または、以下のようなロジックを使用します

    <ul>
  <% total_per_column.times do |index| %>
    <% @categories.each do |categories| %>
      <% if category = categories[index] %>
        <li><%= category %></li>
      <% end %>
    <% end %>
  <% end %>
</ul>

個人的には最初のものの方が簡単なので好きです。:)

于 2013-03-15T10:50:38.680 に答える
1 
xs = %w(a b c d e f g)
xs.in_groups(3).transpose
#=> [["a", "d", "g"], ["b", "e", nil], ["c", "f", nil]]

これで、行要素が適切に配置されたので、テーブルを描画します。

于 2013-03-15T11:12:14.113 に答える
0 
@array = [A..Z]  
$i = 0
$j = 0 
    while $i < $array.count  do
     <ul>
       while $j < 3
      <li>
        puts @array[$i]
      </li>
        $j +=1
       end
       $i +=1
     </ul>
    end

ネストされたwhileループのこの概念を使用します。

于 2013-03-15T10:53:25.563 に答える