用jquery的'反饋消息'前置'

Question

1. 我想在ID爲'messagefield'的範圍內顯示5條用戶反饋消息。
2. 我想要的跨度被堆疊在彼此與最新的頂部之上
3. 當5個跨度已經堆疊起來，我想刪除他們 - >用下面的下一個5個消息替換它們 。

我想這endresult在標記：

<div class="span4 messageField"> 
<span id="messagefield">Message 1</span>' 
<span id="messagefield">Message 2</span>' 
<span id="messagefield">Message 3</span>' 
<span id="messagefield">Message 4</span>' 
<span id="messagefield">Message 5</span>' 
</div> 

我與jQuery的追加第一跨度messagefield我的div像這樣：

$('.messageField').prepend('<span id="messagefield"></span>'); 

這裏是產生點擊功能消息字段的文本：

$("#fireCreate").click(function(e) { 
     $("#messagefield").html("Importerar titelsida, vänta ..."); 
}); 

這是在HTML標記：

<div class="span4 messageField"> 
<!-- HERE IS WHERE THE SPANS WILL STACK UP --> 
</div> 

Answer 1

你可以做

//the counter is here just to show you that this works, you could use this to generate an id 
var counter = 0; 
$("#fireCreate").click(function(e) { 
    counter++; 
    if($('.messageField span').length === 5){ 
     $('.messageField span:last').remove(); 
    } 
    $('.messageField').prepend($('<span />', { id: "message"+counter, class: "singleMessage", text : "Importerar titelsida, vänta ..."+counter})); 
}); 

這裏看看http://jsfiddle.net/D4FQd/