如何关闭容器< div>循环吗? [英] How do I close the container <div> in a loop?

问题描述

我有一个产品列表，我想在产品Feed中展示一个广告.

I have a list of products and I want to show an ad in the product feed.

我想要类似的东西

<div id="container">
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
</div>
<div id="add">
    Adsense Stuff
</div>
<div id="container">
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
</div>

在ERB中，我会:

<div id="container">
    <% productes.each_with_index do |product,index| %>
         <div id="product"><%= product %></div>
         <% if index == 2 %>
            </div>
            <div id="add">
                Adsense Stuff
            </div>
            <div id="container">
         <% end %>
     <% end %>
</div>

如何将其翻译为Haml或Slim?

How you translate this to Haml or Slim?

由于两个原因，我不想将循环分为两个循环:我不知道产品按页面计数，而且我还有一些更精致的代码，它们使用与Rails cycle()助手相同的HTML技巧.因此，找到使之成为可能的技巧将对我有很大帮助.

I don't want to break the loop in two loops for two reasons: I don't know the products count by page and I have some more elaborate code which uses the same HTML tricks with the Rails cycle() helper. So, it will help me a lot to find a trick to make it possible.

推荐答案

Haml使您可以在需要时将原始HTML编写为输出.尽管很奇怪，但是您可以像在Erb上那样使用它来实现您的目标:

Haml lets you write raw HTML as output when you want it. Although weird, you can use this to achieve your goals here, as you did with Erb:

TEMPLATE = '
.container
  - products.each_with_index do |product,index|
    - if index == 2
      </div>
      <div class="ad">AdSense Stuff</div>
      <div class="container">
    .product<
      = product
'

require 'haml'
products = %w[ cat box kitten shoes hounds ]
puts Haml::Engine.new(TEMPLATE).render binding

#=> <div class='container'>
#=>   <div class='product'>cat</div>
#=>   <div class='product'>box</div>
#=>   </div>
#=>   <div class="ad">AdSense Stuff</div>
#=>   <div class="container">
#=>   <div class='product'>kitten</div>
#=>   <div class='product'>shoes</div>
#=>   <div class='product'>hounds</div>
#=> </div>

缩进看起来很怪异，但是您可以看到您有两个容器，其中两个都包含AdSense内容.

The indentation looks weird, but you can see that you have two containers with the AdSense stuff outside either.

这篇关于如何关闭容器< div>循环吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！