隐藏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>