Javascript 设置附加列表项的限制 函数随机表情（）{ 变量emojis=[ “：）”、“：（”、“=D”、“xD”、“o_o”、“o:|”、“o:-o”、“o:$” ]; 返回emojis[Math.floor（Math.random（）*emojis.length）]； } 函数textscroll（）{ $（'.messages'）。追加（“”+随机表情（）+””）； } 设置间隔（文本滚动，3000）； 函数滚动（）{ $（'.messages'）.children（）.hide（）； } 设置间隔（滚动，5900）；

如您所见，我的代码在.messages（我的HTML文件中的无序列表）中附加了一个随机表情符号每隔3秒。我如何限制它只显示最近的10个表情？我试图隐藏列表，并在添加新的表情时显示。它不仅不这样做，而且会一直在页面上列出它们。我不知道下一步该怎么做，这不是家庭作业或任何实际值得做的事情，只是一个让我感到困惑的奇怪问题这几天真是太疯狂了。除了使用.hide（）之外还有其他方法吗？我想使用.hide（）每4秒对我来说有点难。我搜索了MDN，想在代码中实现一些东西，但运气不好。

在添加随机表情符号后，只需检查列表项的数量，如果超过10，则删除第一个，就可以了

function randomEmoji() {
  var emojis = [
    ':)', ':(', '=D', 'xD', 'o_O', ':|', ':-O', ':$'
  ];
  return emojis[ Math.floor( Math.random() * emojis.length ) ];
}
function textscroll(){
  $('.messages').append("<li>" + randomEmoji() + "</li>");
}
setInterval(textscroll,3000);
function scroll(){
$('.messages').children().hide();
}
setInterval(scroll,5900);

函数文本滚动（）{
$（'.messages'）。追加（“
”+随机表情（）+”
”）；
如果（$（'.messages li'）。长度>10）{
$（'.messages'）.first（）.remove（）；
}
}

Hrm。我想在这种情况下我会做的是查看列表的长度。如果列表的长度大于10，只需删除第一个元素。如果出于某种原因希望跟踪所有表情符号，但只显示最近的十个，则可以使用类似的逻辑，但不必删除第一个元素，您可以选择列表中第一个没有自定义类的项…说您创建的“last10”，然后在向列表中添加项时将该类附加到该项…然后您只显示所有具有类“last10”的项

更具体地说：您可以查找一个没有类“last10”附加该类的项，然后隐藏该项。

尝试类似的方法（）：

每次添加新列表项时，请检查长度是否超过限制：

function textscroll () {
    $('.messages').append("<li>" + randomEmoji() + "</li>");
    if ( $('.messages li').length > 10 ) {
        $('.messages li').first().remove();
    }
}

var messageLimit=10；
函数randomEmoji（）{
变量emojis=[
“：）”、“：（”、“=D”、“xD”、“o_o”、“o:|”、“o:-o”、“o:$”
];
返回emojis[Math.floor（Math.random（）*emojis.length）]；
}
函数textscroll（）{
var$messages=$（'.messages'）；
var$children=$messages.children（）；
$messages.append（“
”+随机表情（）+“
”）；
如果（$children.length>messageLimit）{
//太多了，去掉最老的
$children.first（）.remove（）；
}
}
设置间隔（文本滚动，100）；

哇，这太简单了！我想我是想得太多了。谢谢你，一切都好了！

var messageLimit = 10;

function randomEmoji() {
  var emojis = [
    ':)', ':(', '=D', 'xD', 'o_O', ':|', ':-O', ':$'
  ];

  return emojis[ Math.floor( Math.random() * emojis.length ) ];
}

function textscroll(){
  var $messages = $('.messages');
  var $children = $messages.children();

  $messages.append("<li>" + randomEmoji() + "</li>");

  if($children.length > messageLimit) {
    // there are too many, remove the oldest
    $children.first().remove();
  }
}

setInterval(textscroll, 100);