web-dev-qa-db-ja.com

forループでは、2つの投稿ごとにdivでラップします

基本的に、私は Jekyll （これは Liquid テンプレート言語を使用します）を使用しており、forの2つの項目ごとにラップするdivループを記述しようとしています。

これは私の現在のループです：

<div>
  {% for post in site.posts %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endfor %}
</div>

これは次のように4つの投稿を出力します。

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

4つの投稿に対する私の望ましい出力は次のとおりです。

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

どうすればこれを達成できますか？

jekyllliquid
26
Tom

私はゲームに遅れていることを知っていますが、私が感じるのは、ハックを感じないかなりエレガントなソリューションだと思いました。

forループのlimitおよびoffset paramsを使用すると、一度に1行ずつ、行ごとにN個の投稿を反復できます。

まず、列挙する必要がある行の数を数えます。

_{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}
_

Ruby同等のものはrows = (posts.size / 2.0).ceilになります（奇数は独自の行を取得します）。

次に、行を反復処理します。

_{% for i in (1..rows) %}
  <div>
_

ここで、_(i - 1) * 2_を使用してコレクションオフセットを計算する必要があります（_forloop.index0_を使用）：

_  {% assign offset = forloop.index0 | times: 2 %}
_

次に、行のオフセットで始まる投稿のスライスを反復処理できます（Rubyの_posts[offset, 2]_と同等）。

_    {% for post in site.posts limit:2 offset:offset %}
      <a href="{{ post.url }}">{{ post.title }}</a>
    {% endfor %}
_

行div要素とforループを閉じます。

_  </div>
{% endfor %}
_

それでおしまい！

Rubyでは、次のようになります。

_rows = (posts.size / 2.0).ceil # the number of rows
(1..rows).each do |i|
  offset = (i - 1) * 2
  # <div>
  posts[offset, 2].each do |post|
    # <a href="#{post.url}>#{post.title}</a>
  end
  # </div>
end
_

今、すべて一緒に、Liquidで：

_{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}
{% for i in (1..rows) %}
  {% assign offset = forloop.index0 | times: 2 %}
  <div>
    {% for post in site.posts limit:2 offset:offset %}
      <a href="{{ post.url }}">{{ post.title }}</a>
    {% endfor %}
  </div>
{% endfor %}
_

これが誰かを助けることを願っています！

13
Matt Todd

<div>sと投稿が修正されました（選択した回答に基づいている場合と思われます）、同じ出力を取得する短い方法があります-limitを使用しますおよびoffset：
（ページングへの液体のアプローチ）

<div>
  {% for post in site.posts limit: 2 %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endfor %}
</div>
<div>
  {% for post in site.posts limit: 2 offset: 2 %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endfor %}
</div>

さらに良い解決策：

投稿数が固定されていない場合（つまり、100の投稿がある場合、50 <div>sそれぞれ2つの投稿）、次に forloop.index（これは他のほとんどの回答ですでに言及されています）、およびmoduloを使用して、現在のインデックスが偶数か奇数かを確認します。

{% for post in site.posts %}
  {% assign loopindex = forloop.index | modulo: 2 %}
  {% if loopindex == 1 %}
    <div>
      <a href="{{ post.url }}">{{ post.title }}</a>
  {% else %}
      <a href="{{ post.url }}">{{ post.title }}</a>
    </div>
  {% endif %}
{% endfor %}

これは希望する出力も返しますが、any件の投稿に対して機能します。

33
Christian Specht

これを試してください：

<div>
    {% for post in paginator.posts %}
        <div>
            {% if forloop.index == 1 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 2 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        </div>
        <div>
            {% if forloop.index == 3 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 4 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        </div>
    {% endfor %}
</div>
6
Nigel Greenway

私はこれに遭遇しました（ https://Gist.github.com/leemachin/2366832 ）これは他の回答に投稿されたものよりもはるかに優れたソリューションですが、これが必要になることを覚えておいてくださいプラグイン（ https://Gist.github.com/leemachin/2366832#file-modulo-filter-rb ）を機能させるには：

{% for post in paginator.posts %}

  {% capture modulo %}{{ forloop.index0 | mod:2 }}{% endcapture %}

  {% if modulo == '0' or forloop.first %}
    <div>
  {% endif %}

    <a href="{{ post.url }}">{{ post.title }}</a>

  {% if modulo == '1' or forloop.last %}
    </div>
  {% endif %}

{% endfor %}
6
Tom

私は本当に自分のやっていることに集中すべきですが、1歳で彼女のすべてのおもちゃを私に与えるのは難しいです...：D

コードが機能するはずです。

<div>
    <div>
        {% for post in paginator.posts %}
            {% if forloop.index == 1 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 2 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        {% endfor %}
    </div>
    <div>
        {% for post in paginator.posts %}
            {% if forloop.index == 3 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 4 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        {% endfor %}
    </div>
</div>

のhtmlを与える必要があります：

<div>
    <div>
        <a href="">Title 1</a>
        <a href="">Title 2</a>
    </div>
    <div>
        <a href="">Title 3</a>
        <a href="">Title 4</a>
    </div>
</div>
1
Nigel Greenway

わかりました、適切なスタイリングなしで簡単に試してみましたが、これはうまくいくはずです：

<div>
{% for post in paginator.posts %}
    {% case forloop.index %}
    <div>
    {% when 1 %}
        <a href="">{{ post.title }}</a>
    {% when 2 %}
        <a href="">{{ post.title }}</a>
    </div>
    <div>
    {% when 3 %}
        <a href="">{{ post.title }}</a>
    {% when 4 %}
        <a href="">{{ post.title }}</a>
    </div>
{% endcase %}
{% endfor %}
</div>
0
Nigel Greenway

@ smilinmonki666の助けを借りて、私もこれを希望どおりに機能させることができました。これが最終的なコードです。

{% assign current_page_posts = paginator.posts | size %}

{% if current_page_posts > 0 %}
  <div>

    <div>
      {% for post in paginator.posts %}
        {% if forloop.index == 1 %}
          <a href="{{ post.url }}">{{ post.title }}</a>
        {% endif %}

        {% if forloop.index == 2 %}
          <a href="{{ post.url }}">{{ post.title }}</a>
        {% endif %}
      {% endfor %}
    </div>

    {% if current_page_posts > 2 %}
      <div>
        {% for post in paginator.posts %}
          {% if forloop.index == 3 %}
            <a href="{{ post.url }}">{{ post.title }}</a>
          {% endif %}

          {% if forloop.index == 4 %}
            <a href="{{ post.url }}">{{ post.title }}</a>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}

  </div>
{% endif %}
0
Tom

https://shopify.github.io/liquid/tags/iteration/ で説明されているように、cycleタグを使用してこれを行うことができます

{% for post in site.posts %}
  {% cycle '<div>', '' %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% cycle '', '</div>' %}
{% endfor %}

出力

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>
0
planetmik

クリスチャンのソリューションを見た後、私は（pugベースの）コードを次のように更新しました：

.blog
    .container
        .row
            .col-xs-0
            .col-xs-12
                h1 Blog
                p Summit blog with latest news, thinking and participant's posts.
            .col-xs-0
        | {% for page in site.posts                         %}
        | {% assign loopindex = forloop.index | modulo: 2   %}
        | {% if loopindex == 1                              %}
        .row
        | {% endif %}
        span
            .col-xs-6.col-sm-6
                .card
                    .card-top
                        + add-title
                        + add-author
                    .card-block
                        + add-snippet
        | {% endfor                                        %}
0
Dinis Cruz