隱藏在一個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舊內容

回答

相關問題