javascript - 将列表限制为最后 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 个商品的人返回网站时，他们将看到上一个 session 中的最后 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