Попытка добавления нескольких элементов, получение непостоянного результата

Question

Я пытаюсь добавить несколько div на страницу через выпадающий список.

У меня есть проблема:

var antal = $('.room-holder').size(); 
var roomholder = '<div class="room-holder">' + $('.room-holder').html() + '</div>'; 
var rooms = ""; 

while ($(this).val() > (antal + 0)) { 
    rooms = rooms + roomholder; 
    antal++; 
} 

$(rooms).insertAfter($('.room-holder')); 
rooms = ""; 

Я также попытался с цикл, как это:

var many = ($(this).val() - antal); 

for(i=0; i < many; i++){ 
    rooms = rooms + roomholder; 
} 

$(rooms).insertAfter($('.room-holder')); 
antal = $('.room-holder').size(); 
rooms = ""; 

Раскрывающимися имеет значение от 1 - 10

Когда я выбираю в первый раз я получаю нужное количество полей, но когда я выбираю второй раз, я получаю как сумму, которую он должен добавить плюс 2-3 поля.

Кто-нибудь знает почему?

редактировать: Я добавил его jsfiddle: http://jsfiddle.net/gmKJw/

Answer 1

Это ошибка номера должны быть вставлены получал прилагается к каждому roomholder уже присутствует. Демо: Fiddle

Исправление для добавления к новым room-holder после последнего room-holder

Изменить

$(rooms).insertAfter($('.room-holder')); 

к

$(rooms).insertAfter($('.room-holder:last')); 

Демо: Fiddle

Answer 2

Возможная логическая ошибка здесь возникает, если количество комнат, которые вы выбрали в раскрывающемся списке, меньше количества отображаемых в настоящее время номеров. Я хотел бы предложить следующее решение (которое включает в себя другие стилистические улучшения):

var numRoomsReqd = parseInt($(this).val(), 10); 
var numCurrRooms = $('.room-holder').length;  // use length, not size 
var $roomholder = $('.room-holder').first().clone(); 
var $rooms = $(); 
$('.room-holder').slice(numRoomsReqd).remove() 

while (numCurrRooms < numRoomsReqd) { 
    $rooms = $rooms.add($roomholder.clone()); 
    numCurrRooms++; 
} 

$rooms.insertAfter($('.room-holder').last());