如何在循环中关闭容器 <div>？答案

【问题标题】：How do I close the container <div> in a loop?如何在循环中关闭容器 <div>？
【发布时间】：2012-01-17 11:06:17
【问题描述】：

我有一个产品列表，我想在产品 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？

我不想将循环分成两个循环，原因有两个：我不知道产品按页计数，而且我有一些更精细的代码，它们使用与 Rails cycle() 帮助程序相同的 HTML 技巧。所以，找到一个技巧来实现它对我有很大帮助。

【问题讨论】：

标签： ruby-on-rails ruby haml pug slim-lang

【解决方案1】：

Haml 允许您在需要时编写原始 HTML 作为输出。虽然很奇怪，但您可以在这里使用它来实现您的目标，就像您对 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 内容。

【讨论】：

【解决方案2】：

在 HAML 中

-products.each_with_index do |product,index|
  .product= product
  -if index == 2
    .ad= Adsense Stuff

我不会打扰容器，只需设置 css 来处理产品和广告类。（这也带来了一个事实，即您有多个同名的 id，这些应该更改为类）。

【讨论】：

谢谢！但是，有时，出于 css 的原因，您需要在循环的元素周围有一个无语义的包装器（我同意上面可以使用 css 技巧来像这样工作，但事实并非如此。）

【解决方案3】：

- products.each_with_index do |product,index|
  .product
    = product
    - if index == 2
      .ad= Adsense Stuff

这应该做吗？

【讨论】：

啊，不，haml 不可能做到这一点（假设很苗条）。你可以通过JS添加缺席的东西吗？

【解决方案4】：

一个可能的 Haml 解决方案，使用 surround helper:

.container
  -products.each_with_index do |product,index|
    .product=product
    -if index == 2
      =surround "</div>", "<div class='container'>" do
        .add
          Adsense stuff

这有点小技巧，因为我们在“伪造”关闭和打开容器 div；据 Haml 所知，我们仍在其中。出于这个原因，它还引入了一些重复，因为您必须在两个地方指定“容器”类（以及 div 可能具有的任何其他属性）。

此解决方案类似于@Phrogz's solution，但它更“Haml-ly”，允许您使用 Haml 语法来定义添加 div。

【讨论】：