在jQuery中彈出pre-pended的div項（在消息接收上）

我有一個小函數使用web套接字來接收實時更新。當收到新的響應時，該函數在html中預先設置一個div。我只想將更新顯示在頁面內的一個窗口中，即。最多隻能顯示10個預設的div。理想情況下，我需要彈出最老的div，然後纔會溢出其父div。在jQuery中彈出pre-pended的div項（在消息接收上）

我的問題：

如何彈出的div他們溢出父面前？考慮到我幾乎每隔一秒鐘都會收到回覆，那麼做這件事最有效的方法是什麼？

#HTML 

<div class="content"> 
    <p>archienorman-thesis $ realtime_bitcoin</p> 
    <div id="messages"></div> 
    <!-- window content --> 
</div> 



#JS FUNCTION 

var total = 0; 
var btcs = new WebSocket('wss://ws.blockchain.info/inv'); 

btcs.onopen = function() { 
    btcs.send(JSON.stringify({"op": "unconfirmed_sub"})); 
}; 

btcs.onmessage = function (onmsg) { 
    console.log(response); 
    var response = JSON.parse(onmsg.data); 
    var amount = response.x.out[0].value; 
    var calAmount = amount/100000000; 
    var msgs = $('#messages .message'); 
    var count = msgs.length; 

    if (count == 10) { 
     msgs.first().remove(); 
    } 
    $('#messages').prepend("<p class='tx'> Amount: " + calAmount + "</p>"); 
}

來源

2016-08-11 user3939059

那不是最古老的DIV是最後一個？你預先考慮到數組，所以最新的應該是'first（）'（你正在刪除） –

使容器DIV overflow: hidden，檢查是否存在使用JS scrollHeight和clientHeight溢出。

CSS

#messages { 
    overflow: hidden; 
}

刪除您if聲明和你prepend()行後補充一點：

$('#messages').prepend("<p class='tx'> Amount: " + calAmount + "</p>"); 
$('#messages').css("overflow", "scroll"); 
if($('#messages')[0].scrollHeight > $('#messages').height()) 
    msgs.last().remove(); 
$('#messages').css("overflow", "hidden");

上述很快使#messages有overflow: scroll親以便scrollHeight財產能夠運作。如果有額外的滾動，則刪除該元素。

參見Demo。

注意

見我對你的問題發表評論。您應該刪除last()，而不是first()。以演示爲例 - 嘗試將last()更改爲first()，並且它不起作用。

來源

2016-08-11 19:18:48

我剛剛測試過你的建議更改，不幸的是仍然有溢出。我也試着讓父div'overflow：hidden' – user3939059

'＃messages' div是否有明確設置的高度（來自CSS或JS）？沒有它，'overflow：hidden'將不起作用。查看演示示例。 –

這就是問題所在！謝謝，非常感謝！ – user3939059

我覺得像這樣的東西應該工作。這是測試代碼，當它們的總寬度超過容器的寬度時，基本上會刪除多餘的子元素。

HTML

<div class="container"> 
    <div>1.Test</div> 
    <div>2.Test</div> 
    <div>3.Test</div> 
    <div>4.Test</div> 
    <div>5.Test</div> 
    <div>6.Test</div> 
    <div>7.Test</div> 
    <div>8.Test</div> 
    <div>9.Test</div> 
    <div>10.Test</div> 
    <div>11.Test</div> 
    <div>12.Test</div> 
    <div>13.Test</div> 
    <div>14.Test</div> 
    <div>15.Test</div> 
</div>

CSS

.container { 
    width:1000px; 
} 

.container div { 
    width: 100px; 
    display: inline-block; 
}

的Javascript

function a() { 
var containerWidth = $('div.container').width(); 
var childWidth = $('div.container div').width(); 
var childCount = $('div.container div').length; 

var removeCount = (childWidth * childCount) - containerWidth; 
if(removeCount > 0) { 
    removeCount = Math.floor(removeCount/childWidth); 
      console.log(removeCount); 
    for(i = childCount; i > (childCount-removeCount); i--) { 
     $('div.container div:nth-child('+i+')').remove(); 
    } 

    } 
} 

a();

小提琴：https://jsfiddle.net/L3r2nk6z/5/

來源

2016-08-11 20:34:23

在jQuery中彈出pre-pended的div項（在消息接收上）

回答

相關問題