jquery循环来创建元素

到目前为止，我对这项任务没有运气，所以感谢任何帮助。

我有一个html表单，其中有一个小选择菜单（1-10）即

 1 2 ... 10  

根据选择的值，我希望jquery创建（或删除）该数量的输入文本框（具有不同的名称和ID）。 例如，如果选择2，则会创建这些输入：

我期待您的简单而优雅的解决方案！ 安迪

Answer 1

像这样的东西：

 $('select').change(function() { var num = parseInt($(this).val(), 10); var container = $('
'); for(var i = 1; i <= num; i++) { container.append(''); } $('somewhere').html(container); }); 

Answer 2

略微修改Tatu的答案，

 $('select').change(function() { var num = parseInt($(this).val(), 10); var container = $('
'); for(var i = 1; i <= num; i++) { $('', { id: "id" + 1, name: "name" + 1 }).appendTo(container); } $('somewhere').html(container); }); 

这种方式更快，更容易阅读。 它更快的原因是因为jQuery严重缓存创建元素。 它第一次缓存“”，然后只使用缓存的对象来创建更多它们。 它可以这样做，因为文本不会改变。 但是，它不能通过append（或者不是通过调用主jquery函数$ AFAIK创建的html）来执行此缓存，因为由于它们每个循环都是唯一的。 有关此信息，请参阅John Resig的“您可能不了解的关于jQuery的事情”演讲。

Answer 3

  1 2 ... 10  
  

为了你的标记。

然后

 $('select').bind('change', function () { var val = parseInt($(this).val(), 10) + 1, str = ''; for (var i=1; i'; } $('#container').html(str); }); 

Answer 4

这使用$.map()使用索引迭代数组，以模拟Perl和PHP等语言的“0..N”范围运算符。 由于$.map()返回每个调用回调函数的返回值的数组，我们可以直接将它传递给$().html()来设置父元素的内容。 整齐？

只需确保以正确的顺序声明回调函数的’object’和’index’参数 – 它们与$.each()相反！

HTML

JS

 const HOW_MANY = 10; $('#container').html( $('', { id: 'selection' }).html( $.map(Array(HOW_MANY), function(o,i) { i++; // because array indices run from 0 return $('', { value: i }).text(i); }) // map ) //  ); 

小提琴

https://jsfiddle.net/kmbro/xxtbjgzo/