將列表限制為最后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
• 項目7
• 項目8
• 項目9
• 項目10
• 項目11
• 項目12
• 項目13
• 項目14
• 項目15
• 項目16

但我只希望瀏覽了全部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

我將保留先前回答中的所有內容，但我相信問題的范圍已更改，現在是數據庫/ 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

這是將以上內容與僅顯示10個項目列表中的最后5個項目結合在一起的另一種解決方案。

  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

Answer 2

您可以使用以下CSS，但是我不確定瀏覽器的兼容性（尚不清楚這是否是正確的兼容性表）：

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

http://jsfiddle.net/TzDqV/