鍍金池/ 問答/HTML5  HTML/ 怎么實現(xiàn)DIV只能展示3條數(shù)據(jù)，新增數(shù)據(jù)的數(shù)據(jù)會把之前的數(shù)據(jù)頂上去，類似于向上的

怎么實現(xiàn)DIV只能展示3條數(shù)據(jù)，新增數(shù)據(jù)的數(shù)據(jù)會把之前的數(shù)據(jù)頂上去，類似于向上的數(shù)據(jù)滾動。

未新增數(shù)據(jù)之前
<div>
<p id=1>
<p id=2>
<p id=3>
</div>
新增之后，p1可以被刪除也可以被隱藏
<div>
<p id=2>
<p id=3>
<p id=4>
</div>

怎么實現(xiàn)DIV只能展示3條數(shù)據(jù)，新增數(shù)據(jù)的數(shù)據(jù)會把之前的數(shù)據(jù)頂上去，類似于向上的數(shù)據(jù)滾動。DIV的overflow屬性可以將溢出的內(nèi)容隱藏可是不能展示新內(nèi)容。

數(shù)據(jù)新增是由事件被觸發(fā)后javascript新增。

回答
編輯回答
孤酒

如果是用了mvvm框架，像vue,這樣改變數(shù)據(jù)，視圖就可以同步更新，很簡單。如果用jquery把dom獲取出來，刪掉第一條數(shù)據(jù)，在append了。

2018年6月25日 13:14
編輯回答
荒城

用 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; 
    }
}
2018年3月12日 20:47
編輯回答
爆扎

采用新增節(jié)點的方法，當(dāng)事件被觸發(fā)時新增節(jié)點。在觸發(fā)事件內(nèi)獲取當(dāng)前DIV的所有子元素 var cont=document.getElementById(DIV).childNotes，使用if判斷判斷當(dāng)前元素的長度，如果大于N則刪除con[0];
形成一種DIV只有N個元素，且新增元素會將之前的元素頂上去的效果。

2017年10月6日 09:41