代码之家 › 专栏 › 技术社区 › Andy

创建元素的jquery循环

loops jquery

Andy · 技术社区 · 16 年前

到目前为止,我还没有完成这项任务,所以非常感谢你的帮助。

我有一个html表单,其中有一个小的选择菜单(1-10)

<select>
    <option value = '1'>1</option>
    <option value = '2'>2</option>
    ...
    <option value = '10'>10</option>
</select>

根据所选的值,我希望jquery创建(或删除)那个数量的输入文本框(具有不同的名称和id)。例如,如果选择2,将创建这些输入:

<input type = 'text' name = 'name1' id = 'id1' />
<input type = 'text' name = 'name2' id = 'id2' />

我期待着你毫无疑问的简单和优雅的解决方案! 安迪

4 回复 | 直到 16 年前

Tatu Ulmanen 16 年前

像这样:

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

Alistair 16 年前

稍微修改一下塔图的回答,

$('select').change(function() {
 var num = parseInt($(this).val(), 10);
 var container = $('<div />');

 for(var i = 1; i <= num; i++) {
     $('<input />', {
         id: "id" + 1,
         name: "name" + 1
     }).appendTo(container);
 }

 $('somewhere').html(container);
 });

这种方式更快,更容易阅读。它之所以更快,是因为jQuery大量缓存创建的元素。它缓存“<输入/>第一次,然后只是使用缓存对象来创建更多的对象。它可以这样做,因为文本不会改变。但是,它不能使用append(或者不是通过调用jquery主函数$AFAIK创建的html)进行缓存,因为由于id的原因,它们在每个循环中都是唯一的。请参阅johnresig的“关于jQuery的您可能不知道的事情”演讲,以获取有关这方面的信息。

Matt user129975 16 年前

<select>
    <option value = '1'>1</option>
    <option value = '2'>2</option>
    ...
    <option value = '10'>10</option>
</select>
<div id="container">
</div>

为您的标记。

那么

$('select').bind('change', function () {
    var val = parseInt($(this).val(), 10) + 1,
        str = '';

    for (var i=1; i<val;i++) {
        str += '<input type="text" name="name' + i + '" id="id' + i + '"/>';
    }

    $('#container').html(str);
});

kbro 9 年前

它使用 $.map() 使用索引对数组进行迭代,以模拟Perl和PHP等语言的“0..N”范围运算符。自返回回调函数每次调用的返回值数组,我们可以直接传递给 $().html() 设置父元素的内容。整洁?

$.each() !

<div id='container'></div>

JS公司

const HOW_MANY = 10;

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

小提琴

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