добавить перед jquery 'сообщения обратной связи'

  1. я хочу отобразить 5 сообщений обратной связи с пользователем в промежутке с идентификатором "messagefield".
  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>

Я добавил первое поле span messagefield к моему div следующим образом с помощью jquery: 

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

Вот функция щелчка это создает текст для поля messagefield: 

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

Это разметка в html: 

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

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/

1