Question

我的HTML和下划线代码包含通过每个循环运行的单个对象（名称，电话，位置等）的数据，以便数据库中的所有对象都打印在具有相同内容的页面上。我想将这些对象填充到bootstrap中的两列（所以进入col-xs-6和另一个col-xs-6）也是响应的。如何在不复制任何代码的情况下执行此操作？

HTML：

  <% _.each(profile.team_members, function(t) { %>
            <div class="row clearfix bio">
                <div class="col-xs-6">
                    <div class="bio_content">
                        <% if(t.first_name || t.last_name){ %>
                            <h3 itemprop="name"><%= t.first_name %> <%=t.last_name %></h3>
                        <% } %>
                        <% if(t.member_title){ %>
                            <div class="subtitle"><%= t.member_title %></div>
                        <% } %>
                        <dl class="info-list">
                            <% if(t.team_member_licenses && t.team_member_licenses.length > 0) { %>
                                <dt>Licensed In:</dt>
                                <dd>
                                    <% if(Array.isArray(t.team_member_licenses)) { %>
                                        <%= t.team_member_licenses.join(", ") %>
                                    <% } else { %>
                                        <%= t.team_member_licenses %>
                                    <% } %>
                                </dd>
                            <% } %>
                            <% if(t.team_member_location){ %>
                                <dt>Location:</dt>
                                <dd><%= t.team_member_location %></dd>
                            <% } %>
                            <% if(t.team_member_phone){ %>
                                <dt>Office:</dt>
                                <dd><a itemprop="telephone" class="contact-link color-accent" href="tel:<%=t.team_member_phone_link_formatted%>"><%=t.team_member_phone%></a></dd>
                            <% } %>
                            <% if(t.team_member_fax){ %>
                                <dt>Fax:</dt>
                                <dd><a class="contact-link color-accent" href="tel:<%=t.team_member_fax_link_formatted%>"><%=t.team_member_fax%></a></dd>
                            <% } %>
                            <% if(t.team_member_email){ %>
                                <dt>Email:</dt>
                                <dd><a class="contact-link color-accent" href="mailto:<%=t.team_member_email%>"><%=t.team_member_email%></a></dd>
                            <% } %>
                        </dl>
                    </div> <!--content -->
                </div><!-- /col-lg-12 -->
            </div><!-- /row -->
        <% }); %>

Answer 1

这里的技巧是在每次偶数迭代开始时打印<div class="row clearfix bio">，并在每次奇数迭代结束时打印</div>。

<% _.each(profile.team_members, function(t,index) { %>
    <% if(index % 2 == 0){ %>
     <div class="row clearfix bio">
    <% } %>
      //6 column div printed every iteration
<% if(index % 2 == 1){ %>
    </div><!-- /row -->
<% } %>

完整代码：

 <% _.each(profile.team_members, function(t,index) { %>
        <% if(index % 2 == 0){ %>
          <div class="row clearfix bio">
        <% } %>
            <div class="col-xs-6">
                <div class="bio_content">
                    <% if(t.first_name || t.last_name){ %>
                        <h3 itemprop="name"><%= t.first_name %> <%=t.last_name %></h3>
                    <% } %>
                    <% if(t.member_title){ %>
                        <div class="subtitle"><%= t.member_title %></div>
                    <% } %>
                    <dl class="info-list">
                        <% if(t.team_member_licenses && t.team_member_licenses.length > 0) { %>
                            <dt>Licensed In:</dt>
                            <dd>
                                <% if(Array.isArray(t.team_member_licenses)) { %>
                                    <%= t.team_member_licenses.join(", ") %>
                                <% } else { %>
                                    <%= t.team_member_licenses %>
                                <% } %>
                            </dd>
                        <% } %>
                        <% if(t.team_member_location){ %>
                            <dt>Location:</dt>
                            <dd><%= t.team_member_location %></dd>
                        <% } %>
                        <% if(t.team_member_phone){ %>
                            <dt>Office:</dt>
                            <dd><a itemprop="telephone" class="contact-link color-accent" href="tel:<%=t.team_member_phone_link_formatted%>"><%=t.team_member_phone%></a></dd>
                        <% } %>
                        <% if(t.team_member_fax){ %>
                            <dt>Fax:</dt>
                            <dd><a class="contact-link color-accent" href="tel:<%=t.team_member_fax_link_formatted%>"><%=t.team_member_fax%></a></dd>
                        <% } %>
                        <% if(t.team_member_email){ %>
                            <dt>Email:</dt>
                            <dd><a class="contact-link color-accent" href="mailto:<%=t.team_member_email%>"><%=t.team_member_email%></a></dd>
                        <% } %>
                    </dl>
                </div> <!--content -->
            </div><!-- /col-lg-12 -->
        <% if(index % 2 == 1){ %>
        </div><!-- /row -->
        <% } %>
    <% }); %>

使用下划线数据填充两个引导列？

1 个答案: