在記錄之間插入日期部分DIV根據記錄日期從JavaScript生成的HTML

我有一個活動日誌來自我的項目管理應用程序的事件。在記錄之間插入日期部分DIV根據記錄日期從JavaScript生成的HTML

我想插入一些HTML元素融入到我的活動日誌的視圖來顯示類似於Windows文件瀏覽器顯示，當你按日期排序文件的東西...

低於美好

見圖片理解，因爲它顯示了Windows 7文件瀏覽器中的一些文件和文件夾。在他們之間的是我講的

日期值的列表的標籤我需要計算並獲得透過JavaScipt

今天
昨天
本週早些時候
上週
本月初
今年稍早
前一陣子

我的應用程序如下所示...

因此，下面顯示的每個活動行都是通過調用基於JSON字符串記錄類型構建正確HTML的函數在JavaScript中生成的。

我在想，如果我建立一些函數來比較日期，我可以處理每一行，檢查它是否與上面提到的我的某個日期部分匹配。

用這種方法，如果3個記錄匹配「昨天」，那麼它會使3個DIV的「昨天」。

爲了防止這種情況，我想也許我可以有一個變量對每個日期部分，一旦1個記錄匹配，設置變量爲「true」

一旦日期部分是「真」，它將開始尋找爲下一個日期部分插入。

這聽起來像是這樣做的方式還是有另一種方式？

請記住，每行/記錄在通過JavaScript函數運行時都會添加到HTML中？

來源

2015-08-27 JasonDavis

嘗試添加'class'，例如，「昨天」與「昨天」的記載，包裝每個星期，日期，週期在父元素，款式有空間的每個父元素元素下一個？ – guest271314

如果您擔心製作多個相同的分隔線，那麼一個想法是首先製作分隔線，然後根據開關（日期）/情況..將分隔線逐個插入分隔線 – cosmycx

你說：「我想，也許我可以爲每個日期部分和可變一次1個記錄匹配，設置變量爲‘真’」。

爲什麼不使用對象？

`pseudo-code` 
var labels = {}; // Today, Yesterday, Earlier this Week, etc 

function createDivs(date, row) { 
    labels[date] = labels[date] || []; 
    labels[date].push(row); 
}

，你可以通過你的數據和對象，如果該鍵存在與否和數據總是附加到正確的標籤將是自我意識的循環。

來源

2015-08-27 01:52:27 Data

這種方法聽起來很有前途。儘管如此，我還沒有完全理解它。在我看來，日期標籤將顯示在每一行，而不是更像部分標題？我可以看到它會如何讓每個記錄都在正確的部分。只是不知道如何限制它只顯示每個部分的標籤名稱的第一次出現 – JasonDavis

利用dl，dt，dd，time元件嘗試; css

[id] { 
 
    font-weight:bold; 
 
    font-size:24px; 
 
    color:blue; 
 
} 
 

 
dd { 
 
    padding:4px; 
 
    color:green; 
 
} 
 

 
time { 
 
    color:red; 
 
}

<dl> 
 
    <dt id="yesterday">Yesterday</dt> 
 
    <dd class="yesterday">Changed stuff at a <time>12/13/2021</time></dd> 
 
    <dd class="yesterday">Changed stuff at b <time>12/12/2021</time></dd> 
 
</dl>

來源

2015-08-27 02:01:40 guest271314

在記錄之間插入日期部分DIV根據記錄日期從JavaScript生成的HTML

回答

相關問題