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

Question

Looking for a solution to the following: I have a list of items eg

<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>

The list is added to (for each person) each time they look at products on the site ie "recently viewed items" and the last product looked at is added to the bottom of the list. The list is taken from a MYSQL database. The list doesn't reset for that person it simply gets longer each time the same person viewing the site views more products.

Is there anyway to only show the last 5 items in the list ignoring the ones before bearing in mind new list items are added to the bottom of the list and the list is continually growing?

I'd like the list to just show the last five products at any one time for each person who views the site ie the list on the site maybe

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Item 16

but I only want the person who has veiwed all 16 products to just see the last 5 recently viewed products ie

• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Item 16

Another person may come to the site and view just 4 products eg

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

and they would see these 4 products in their recently viewed list.

A third person may come to the site and view 12 products and they would see

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

When the person above who viewed 16 items comes back to the site they will see the last 5 items from their previous session and when they start viewing products the fisrt item will disappear and a new item will show at the bottom of the list

<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>

then as they start browsing they will see

• Item 12
• Item 13
• Item 14
• Item 15
• Item 16
• Item 17

etc...

is this possible?

Answer 1

I'm going to leave everything from my previous answer but I believe the scope of the question has changed and is now a database/sql question.

I think what you're looking for is a SQL query to limit the number of rows returned and order them for you.

You can check out the documentation for MySQL 5.0 SELECT which can give you an idea of how to do this, but I will also give you an example below.

Assuming you have a table of recently viewed items that looks like the following:

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));

You can use the following query to select the 5 latest entries for a specific user:

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

---

Old Answer

It looks like you are trying to do this with javascript, so maybe your appending data to the list as the user browses the page.

I would not simply try to hide the items, but remove them complete from the DOM. The best way to do this is to write a function that will check the current length of the list and then remove the oldest children (top) before appending a new one.

An example of that might be something like the following:

  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

Here is another solution which combines the above with only showing the last 5 items of a 10 item list.

  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;

  }

A little CSS:

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

#list li {
   height: 20px;
}

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

Answer 2

You can use the following CSS, but I'm not sure about browser compatibility (it's unclear if this is the proper compatibility table):

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

http://jsfiddle.net/TzDqV/