将列表限制为最后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