隱藏div中的舊內容

Question

HTML代碼如下-

<div id="myDiv" style="max-height:500px; overflow-y:auto;margin-top: 15px" >
    <div id="myInnerDiv" style="display:none;border:1px solid black;">
        <span class='myLine' >data1</span>
        <span class='myLine' >data2</span>
        <span class='myLine' >data3</span>
        <span class='myLine' >data4</span>
        <span class='myLine' >data5</span>
    </div>
</div>

myInnerDiv可見性取決於內容，取決於控制器。 現在將動態添加具有myLine類的行。 如您所見，如果內容超過max-height:500px ，則會提供overflow-y:auto我們將看到滾動條。 我想要它僅顯示最新的5行。 所以如果我們加上

<span class='myLine' >data5</span>

然后

<span class='myLine' >data1</span>

應該刪除或隱藏。 有什么建議么？

Answer 1

您可以使用類似這樣的東西。 使用此解決方案，您不會因“較舊”的行而丟失內容。

並且您可能應該使用div而不是span因為span已display: inline-block作為標准，因此不會給您換行

//首先將EDIT隱藏起來，然后附加新的

 $('.addLine').click(function(){ $('#myInnerDiv').append('<div class="myLine">test</div>'); if($('#myInnerDiv').find('.myLine').length > 5) { $('#myInnerDiv').find('.myLine').not('.hidden').first().addClass('hidden'); } }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv" style="max-height:500px; overflow-y:auto;margin-top: 15px" > <div id="myInnerDiv" style="display:block;border:1px solid black;"> <div class='myLine' >data1</div> <div class='myLine' >data2</div> <div class='myLine' >data3</div> <div class='myLine' >data4</div> <div class='myLine' >data5</div> </div> </div> <div class="addLine">add Line </div> 

Answer 2

if($('.myLine').length() > 5 ) {

  $('.myLine').first().remove();

}

這樣的事情。 或者您可以將一個新類添加到.first（）並將其隱藏。

Answer 3

if($('.myLine').length() > 5 ) {

  $('.myLine').first().replaceWith(yourData);

}

Answer 4

您可以自動將div（myDiv）滾動到底部。

這樣最后的值將自動可見。

        <script>
        $(document).ready(function(){

            var objDiv = $('$myDiv');
            objDiv.scrollTop = objDiv.scrollHeight;

        });
        <script>