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的行。您可以注意到，如果内容超过overflow-y:auto，则会提供max-height:500px，我们会看到滚动条。我希望它只显示最新的5行。所以，如果我们添加

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

然后

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

应删除或隐藏

。有什么建议吗？

Answer 1

你可以使用这样的东西。使用此解决方案，您不会丢失“＃34;更早”的内容。线。

并且你应该使用div而不是span，因为span有display: inline-block作为标准，因此不会给你一个新的行

<强> //修改首先隐藏，新的附加

＆＃13;

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

＆＃13;

.hidden {
display: none;
}

＆＃13;

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

＆＃13;

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>

隐藏div中的旧内容

4 个答案: