Блог

Мой код HTML и подчеркивания содержит данные одного объекта (имя, телефон, местоположение и т.д.), Который выполняется через цикл each, чтобы все объекты из базы данных печатались на странице с одинаковым содержимым. Я хочу заполнить эти объекты в двух столбцах начальной загрузки (то есть в 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 amp;amp; 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 -->
        <% }); %>
  

Хитрость здесь заключается в том, чтобы печатать <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 amp;amp; 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 -->
        <% } %>
    <% }); %>