Для цикла оберните каждые две записи в div

В принципе, я использую Jekyll (который использует Liquid tempating language), и я пытаюсь написать цикл for, который обертывает каждые два элемента в div.

Это мой текущий цикл:

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

Что бы выводить четыре сообщения, например:

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

Мой желаемый результат для четырех сообщений:

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

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

Как я могу это сделать?

Ответы

Ответ 1

Я знаю, что я опаздываю на игру, но я нашел то, что я чувствую, довольно элегантное решение, которое не кажется хриплым.

С параметрами for loop limit и offset мы можем перебирать по одной строке за один раз, по 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 %}

Затем мы можем перебирать срез сообщений, начиная со смещения строки (эквивалентно posts[offset, 2] в Ruby):

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

Закройте элемент div и за цикл:

  </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 %}

Надеюсь, это поможет кому-то!

Ответ 2

Если число <div> и сообщений фиксировано (что, по-видимому, зависит от того, какой ответ вы выбрали), существует более короткий способ получить тот же результат - используя 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> с двумя сообщениями каждый), то вы можете использовать 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 %}

Это также возвращает желаемый результат, но работает для любого количества сообщений.

Ответ 3

Я только что наткнулся на это (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 %}

Ответ 4

Попробуйте следующее:

<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>

Ответ 5

Мне действительно нужно сосредоточиться на том, что я делаю, но трудно с одним годом, дав мне все свои игрушки...: 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>

Ответ 6

Хорошо, я сделал быструю попытку без правильного стиля, но это должно работать:

<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>

Ответ 7

С помощью @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 %}

Ответ 8

Посмотрев на христианское решение, я обновил свой код (на основе мопса) до:

.blog
    .container
        .row
            .col-xs-0
            .col-xs-12
                h1 Blog
                p Summit blog with latest news, thinking and participant 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                                        %}