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

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

然后

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

应该删除或隐藏。有什么建议吗？

Answer 1

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

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

}

类似的东西。或者您可以向 .first() 添加一个新的 class 并将其隐藏。

Answer 2

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

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

}

Answer 3

你可以使用这样的东西。使用此解决方案，您不会丢失 "older" 行的内容。

你应该使用 div 而不是 span 因为 span 有 display: inline-block 作为标准，因此不会给你换行

//编辑 第一个被隐藏，新的被附加

$('.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 4

您可以自动将 div (myDiv) 滚动到底部。

以便最后的值自动可见。

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

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

        });
        <script>

在 div 中隐藏较旧的内容

Hide older content in a div

html

javascript

css

jquery

overflow