Question

我正在使用for循环，我正在使用if else if。

循环基本上显示消息，首先显示30天内到达的消息，然后显示超过30天的消息。

但是我需要设置一个分隔符The following notifications are older than 30 days如果我把它放在else if内，它就会出现在else if

内的每条消息的顶部

       _.forEach(this.collection.models, function(model, index){

            <%
            var createdDateTime= new Date(created_at);
            var currentDateTime= new Date();
            var difference = Math.round((createdDateTime- currentDateTime) / (1000 * 60 * 60 * 24))

            if(difference > -30 ) { %>
            <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>">
              <p class=""><%- message %></p>
              <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p>
            </div>
            <% } else if(difference < -30 ) { %>

           <div class="blue banner server-banner" style="min-height: 25px; width: 100%; color: #fff; font-size: .7em; text-transform: uppercase; text-align: center; padding-top: 10px;">
              The following notifications are older than 30 days
            </div>

            <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>">
              <p class=""><%- message %></p>
              <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p>
            </div>
            <% } %>
       });

所以我的问题是，我怎样才能在else if的第一次迭代中显示我想要的文字。

Answer 1

这是我将如何做到的。您需要一个布尔值才能知道您至少进入过else if条件一次。然后在else if中使用此布尔值将忽略，因为您第一次进入时会将其设置为true。

var isAlreadyDisplayed = false; 
_.forEach(this.collection.models, function(model, index){

        <%
        var createdDateTime= new Date(created_at);
        var currentDateTime= new Date();
        var difference = Math.round((createdDateTime- currentDateTime) / (1000 * 60 * 60 * 24))

        if(difference > -30 ) { %>
        <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>">
          <p class=""><%- message %></p>
          <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p>
        </div>
        <% } else if(difference < -30 && !isAlreadyDisplayed) { 
        isAlreadyDisplayed = true;         
        %>
       <div class="blue banner server-banner" style="min-height: 25px; width: 100%; color: #fff; font-size: .7em; text-transform: uppercase; text-align: center; padding-top: 10px;">
          The following notifications are older than 30 days
        </div>

        <div class="notification-box <%- read != true ? 'unread' : '' %>" data-type="<%- deeplink_type %>" data-id="<%- deeplink_id %>">
          <p class=""><%- message %></p>
          <p class="light-grey-text datetime-text" style="margin-top:0.5em;"><%- created_at %></p>
        </div>
        <% } %>
   });

Answer 2

所以添加一个布尔检查。在forEach

之前定义

var isFirst = true;

并在其他内部

if(isFirst) {
    isFirst = false;
    //output html
}

Answer 3

使用true / false开关来满足您的条件。根据该条件，您可以填充您的消息，前提是差异按排序顺序排列。

JS - 在循环内的第一个显示文本

3 个答案: