怎么实现DIV只能展示3条数据,新增数据的数据会把之前的数据顶上去,类似于向上的数据滚动。

未新增数据之前
<div>
<p id=1>
<p id=2>
<p id=3>
</div>
新增之后,p1可以被删除也可以被隐藏
<div>
<p id=2>
<p id=3>
<p id=4>
</div>

怎么实现DIV只能展示3条数据,新增数据的数据会把之前的数据顶上去,类似于向上的数据滚动。DIV的overflow属性可以将溢出的内容隐藏可是不能展示新内容。

数据新增是由事件被触发后javascript新增。

回复
阅读 2.6k
3 个回答

用 css 就可以解决你说的问题。如下:

<div class="only3children">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
.only3children > p {
    display: none;
}
/* 只显示最后三条 */
.only3children > p:nth-last-child(3), .only3children > p:nth-last-child(3) ~ p {
    display: block;
    /* 如果需要动效可以在这里添加 */
    animation: fadeIn .3s ease both; 
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1; 
    }
}

如果是用了mvvm框架,像vue,这样改变数据,视图就可以同步更新,很简单。如果用jquery把dom获取出来,删掉第一条数据,在append了。

采用新增节点的方法,当事件被触发时新增节点。在触发事件内获取当前DIV的所有子元素 var cont=document.getElementById(DIV).childNotes,使用if判断判断当前元素的长度,如果大于N则删除con[0];
形成一种DIV只有N个元素,且新增元素会将之前的元素顶上去的效果。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏