Question

好的，这是一个基本的标记

<ul>
    <li>User 1</li>
    <li>User 2</li>
    <li>User 3</li>
</ul>
<form>
    <input type="text" value="" name="username[]" id="users"/>
</form>

我想要做的是获取ul的长度，我知道该怎么做，所以如果数字为3，它将创建3 <input type="text" name="username[]" value="" id="users"/>使用该元素中的Li中的用户名，基本上在用户按下按钮后，表单应该如下所示

<form>
    <input type="text" value="User 1" name="username[]" id="users"/>
    <input type="text" value="User 2" name="username[]" id="users"/>
    <input type="text" value="User 3" name="username[]" id="users"/>
</form>

我现在的编码是

$('#form_submit').click(function() {
    var id="#"+ $('.dataSrc').attr('data-id');
    if(id =="#titles_sendto" && $('#ListedAuthSend li').length >= 1) {
        var ListAuthUsers = [];
        var listedAuthUsers = $('#ListedAuthSend li');

        for(var i =0;i<listedAuthUsers.length;i++){
            var name = $(listedAuthUsers[i]).text();
            ListAuthUsers.push(name);
        }
    }
});

http://jsbin.com/ibebax/1/edit直观地看到代码

这样的事情会起作用吗？

for(var j=0;j<ListAuthUsers.length;j++){
 var tab = $(ListAuthUsers[i]);
 var html = '<ul>';
 html += '<li>'+tab+'</li>';
 alert(html);
 }

Answer 1

在你的for循环中加入这样的东西：

$('<input>').attr({
    type: 'text',
    name: 'username[]',
    id: 'users'
}).appendTo('form');

Answer 2

在循环内部创建输入：

var input = $("<input type='text'>");
input.attr("id", "users" + i);
input.attr("name", "username[" + i + "]");
input.val($(listedAuthors[i]).text());
input.appendTo(formsubmit);

行动中：http://jsfiddle.net/tbLmQ/1/

Answer 3

试试这种方式。

与您的示例不同，ID必须是唯一的，因此这将处理唯一ID的创建。

var inputTemplate = $('<input type="text"  name="username[]" />'); //Create a template for the input

$('#form_submit').click(function () {
    var inputs = $('#ListedAuthSend li').map(function (i, ob) {//Use $.map to convert the li's to input.
        return inputTemplate.clone()
               .val(this.innerHTML)
               .attr('id', 'users' + i);
    }).get();

    $('form').html(inputs); //paste it in form.
});

Fiddle

Answer 4

使用jQuery.map：

$('#form_submit').click(function() {
   var $list_auth_users = $('#ListedAuthSend li'),
       input = $('<input type="text" name="username[]"></input>')
   ;

   $('form').html(
     $list_auth_users.map(function(index, user){
       var name = $(user).text();
       return input.clone()
         .attr('id', 'user_' + index)
         .attr('value', name);
     }).get()
   );
});

此处链接：http://jsbin.com/ibebax/3/edit

或for loop

$('#form_submit').click(function() {
   var $users = $('#ListedAuthSend li'),
       input = $('<input type="text" name="username[]"></input>'),
       form_list = [],
       name
   ;


   for (var index = 0; index < $users.length; index++) {
      name = $($users[index]).text();
      $(input.clone().attr('id', 'user_' + index).attr('value', name))
          .appendTo('form'); 
   }
});

此处链接：http://jsbin.com/ibebax/10/edit

为了将来参考，您不能拥有多个具有相同 id 的元素，但您可以使用相同的类

错误：

<div id="f"></div>
<div id="f"></div>

右：

<div id="a" class="f"></div>
<div id="b" class="f"></div>

Answer 5

你可能喜欢这个

$('#form_submit').click(function() {
    $('form').empty();
    $('#ListedAuthSend li').each(function(k, v){
        var txt = $('<input>',{'name':'username[]','id':'users','value':$(v).text() });
        $('form').append(txt);
    });
});

DEMO.

使用for循环

更新

$('#form_submit').click(function() {
    $('form').empty();
    var lis = $('#ListedAuthSend li');
    for(var i=0; i<lis.length;i++){
        var txt = $('<input>',{'name':'username[]','id':'users','value':$(lis[i]).text() });
        $('form').append(txt);
    }
});

DEMO.

基于.length创建多个元素

5 个答案:

Fiddle