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个项目，当他们开始查看产品时，fisrt项目将消失，并且新项目将显示在列表的底部

<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，但我不确定浏览器兼容性（它不清楚this是否是正确的兼容性表格）：

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

http://jsfiddle.net/TzDqV/

将列表限制为最后5个项目

2 个答案: