jquery - 前面加上 jquery 'feedback messages'

Question

1. 我想在 ID 为“messagefield”的范围内显示 5 条用户反馈消息。
2. 我希望跨度彼此堆叠，最新的位于顶部
3. 当 5 个 Span 堆积起来时，我想删除它们 --> 替换它们包含以下 5 条消息。

我希望在标记中得到这个最终结果:

<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 将第一个跨度消息字段附加到我的 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/