javascript - 动态加载新数据到div并隐藏旧数据

Question

我有一个 Div，其中最新新闻是使用 php while 循环从数据库中获取的，显示如下 ->

Hello News 1

Hello news 2

Hello news 3

新闻每10000毫秒更新一次

这是 HTML 部分 php While 循环从这里开始

<div class="media">
<div class="media-object pull-left has-notif">
<i class="fa fa-flash"></i>
</div>
 <div class="media-body">
 <span class="media-heading"><?php echo $fot['message']; ?></span>
 <span class="media-meta time"><?php echo timeAgo($fot['time']); ?></span>
  </div>
  </div>

循环到此结束。 这是我尝试过的->

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#news').load('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<div id="news"> </div>

现在我面临的问题是它刷新整个 div，如果发现新新闻，则新闻 3 应该消失，新新闻出现在顶部，如果发现另一个新闻，新闻 2 应该消失，例如->

ajax 请求找到一篇新闻文章，因此它将显示在此处

Hello News 2 // Hello news 1 should come above this news 2

Hello news 3

Hello news 4 //news 4 should fade away from the screen

Answer 1

你可以使用这样的东西

<div>
<ul>
    <li>zero</li>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>
</div>

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#news').prepend('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
var maxAllowed = 3;
$( 'li:gt(' + ( maxAllowed-1 ) + ')' ).remove();}
</script>

当使用 prepend() 在顶部添加项目时，它会自动从底部删除项目。 看看这个SO thread