尝试添加多个项目，得到一个不稳定的结果答案

【问题标题】：Trying to add multiple items, getting an inconstant result尝试添加多个项目，得到一个不稳定的结果
【发布时间】：2013-03-08 09:19:06
【问题描述】：

我正在尝试通过下拉菜单向页面添加多个 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 = "";

我也尝试过这样的 for 循环：

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/

【问题讨论】：

你能在jsfiddle.net创建一个演示吗
这是事件处理函数的主体吗？如果是这样，我们能否看到绑定事件处理程序和完整（相关）函数声明的代码 - 那时代码中的 this 会更加明显。下拉菜单的 HTML 也很好。
请您编辑您的问题并添加完整的 JavaScript 函数以及它是如何被调用的？知道this 是什么将非常有用。

标签： jquery add

【解决方案1】：

错误是要插入的房间被附加到每个已经存在的roomholder。演示：Fiddle

解决方法是在最后一个room-holder 之后附加到新的room-holder

改变

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

到

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

演示：Fiddle

【讨论】：

【解决方案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() );

【讨论】：