隐藏在一个div旧内容

HTML代码如下 -隐藏在一个div旧内容

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

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

来源

2015-03-13 Aniket Thakur

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

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

}

这样的事情。或者你可以添加一个新的类到.first（）并隐藏它。

来源

2015-03-13 12:55:14 jdu

有趣。将尝试一下。 – 2015-03-13 13:22:09

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

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

}

来源

2015-03-13 12:59:54

好方法，但我将不得不动态创建'yourData'。 – 2015-03-13 13:22:51

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

，你或许应该使用div代替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>

来源

2015-03-13 13:03:27

好的方法。我想追加在底部。所以我想我将不得不相应地将你的代码改为appen在底部并且首先隐藏。 – 2015-03-13 13:25:29

编辑了代码在最后追加并“删除”我知道的第一个 – 2015-03-13 13:27:03

您可以自动将div（myDiv）滚动到底部。

这样最后的值会自动显示。

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

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

     }); 
     <script>

来源

2015-03-13 13:07:07

。我不想显示超过5行。 – 2015-03-13 13:23:17

隐藏在一个div旧内容

回答

相关问题