將列表限制爲最後5個項目

Question

尋找以下解決方案：我有一個項目列表，例如

<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
<li>Item 5</li> 
<li>Item 6</li> 
<li>Item 7</li> 
<li>Item 8</li> 
<li>Item 9</li> 
<li>...</li> 
</ul> 

列表添加到每個他們看產品的網站，即「最近瀏覽過的商品」和最後產品的看着被添加到列表的底部時間（每個人）。該列表取自MYSQL數據庫。該列表不會爲該人員重置，每當觀看該網站的同一人查看更多產品時，該列表就會變得更長。

是否有反正只顯示列表中的最後5個項目忽略之前銘記新的列表項目被添加到列表的底部和列表不斷增長？

我想列表中只顯示最後的五種款產品在任何一個時間對於每個人誰該網站可能

• 項目1
• 項目2
上查看該網站即列表
• 項目3
• 項目4
• 項目5
• 項目6
• 我TEM 7
• 項目8
• 項目9
• 項目10
• 項目11
• 項目12
• 項目13
• 項目14
• 項目15
• 項目16

，但我只想要誰已經veiwed全部16種產品的人只看到最後5級最近瀏覽過的產品，即

• 項目11
• 項目12
• 項目13
• 項目14
• 項目15
• 項目16

另一個個人可能會來到該網站並查看4個產品，例如

<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
</ul> 

他們會在最近查看的列表中看到這4種產品。

第三個人可以來到現場，並查看12種產品，他們會看到

<ul> 
<li>Item 8</li> 
<li>Item 9</li> 
<li>Item 10</li> 
<li>Item 11</li> 
<li>Item 12</li> 
</ul> 

當上述誰看16個項目的人又回到現場，他們將看到他們以前的最後5個項目會話，並且當他們開始查看產品最前一頁項目將消失，新項目將在列表的底部顯示

<ul> 
<li>Item 11</li> 
<li>Item 12</li> 
<li>Item 13</li> 
<li>Item 14</li> 
<li>Item 15</li> 
<li>Item 16</li> 
</ul> 

然後，他們開始瀏覽他們將看到

• 項目12
• 項目13
• 項目14
• 項目15
• 項目16
• 項目17

等...

這可能嗎？

Answer 1

您可以使用下面的CSS，但我不知道瀏覽器的兼容性（目前還不清楚，如果this是正確的兼容性表）：

li { display: none; } 
li:nth-last-child(-n+5) { 
    display: list-item; 
} 

http://jsfiddle.net/TzDqV/

Answer 2

我要去離開我以前的答案，但我相信問題的範圍已經改變，現在是一個數據庫/ SQL問題。

我認爲你要找的是一個SQL查詢來限制返回的行數併爲你排序。

你可以查看MySQL 5.0 SELECT的文檔，它可以讓你知道如何做到這一點，但我也會在下面給你一個例子。

假設你最近瀏覽過的商品的表如下所示：

CREATE TABLE user_product_viewings (
    ID INT(32) NOT NULL auto_increment, 
    product_id INT(32) NOT NULL, 
    user_id INT(32) NOT NULL, 
    viewed_at DATETIME NOT NULL, 
primary KEY (ID)); 

您可以使用下面的查詢來選擇特定用戶的5個最新條目：

SELECT product_id FROM user_product_viewings WHERE user_id = #{USER_ID} ORDER BY viewed_at DESC LIMIT 5; 

---

老回答

它看起來像你試圖用JavaScript做到這一點，所以也許你的用戶瀏覽頁面時將數據附加到列表中。

我不會簡單地嘗試隱藏項目，但將其從DOM完全刪除。最好的方法是編寫一個函數來檢查列表的當前長度，然後在添加一個新的子項之前刪除最早的子項（頂部）。

這方面的一個例子可能是類似以下內容：

var addToList = function (item_value) { 
    while (list.children.length >= 5) 
    { 
     list.removeChild(list.firstChild); 
    } 

    var item = document.createElement("li"); 
    item.innerText = item_value; 

    list.appendChild(item); 
    } 

http://jsbin.com/oriwut/3/edit

這裏是另一個解決方案，它結合了上面只顯示最後5個項目有10項列表。

var addToList = function (item_value) { 

    while (list.children.length >= 10) 
    { 
     list.removeChild(list.firstChild); 
    } 

    var item = document.createElement("li"); 
    item.innerText = item_value; 

    list.appendChild(item); 

    list.scrollTop = list.scrollHeight; 

    } 

小CSS：

#list { 
    overflow-x:scroll; 
    width: 100px; 
    height: 120px; 
} 

#list li { 
    height: 20px; 
} 

http://jsbin.com/ujuxer/2/edit