使用 jQuery 设置新 id答案

【问题标题】：Set new id with jQuery使用 jQuery 设置新 id
【发布时间】：2010-10-21 05:27:18
【问题描述】：

“this”是一个文本字段，“new_id”是一个整数。

当我应用以下 sn-p 时：

$(this).attr('id',   this.id + '_' + new_id);
$(this).attr('name', this.name + '_' + new_id);
$(this).attr('value', 'test');

id 改变了，name 也改变了，但 value 没有改变。如果我将最后一行更改为此（因此使用字符串文字）

$('#mytextfield_3').attr('value', 'test');

它有效。

有什么想法吗？

-- 编辑-- 感谢 Steerpike 的快速插件测试 - 我相信它应该可以工作，但我找不到错误。

这里还有一些代码：

我使用创建克隆

clone = $(this).find('.clone_fields_container:first').clone();

“克隆”现在包含一个嵌入了输入字段的 div。

生成新id后：

  /** Iterate over input and select fields in container */

  clone.children('input,select,textarea').each(function() {
    $(this).attr('id',   this.id + '_' + new_id);
    $(this).attr('name', this.name + '_' + new_id);
    $(this).val('test');
    console.log(this);
  });

文本字段没有任何值。

【问题讨论】：

在您更改后，文档的 id 是否仍然是唯一的？
是的，我改了之后就独一无二了

标签： javascript jquery

【解决方案1】：

我刚刚编写了一个快速插件来使用您相同的 sn-p 运行测试，它工作正常

$.fn.test = function() {
      return this.each(function(){
        var new_id = 5;
        $(this).attr('id',   this.id + '_' + new_id);
        $(this).attr('name', this.name + '_' + new_id);
        $(this).attr('value', 'test');
      });
    };

$(document).ready(function() {
    $('#field_id').test()
});

<body>
  <div id="container">

  <input type="text" name="field_name" id="field_id" value="meh" />
  </div>
</body>

所以我只能假设您的代码中发生了其他事情。能否提供更多细节？

【讨论】：

你是对的，经过半个晚上的调试，我发现将 .html() 编辑与直接节点操作混合起来并不好......无论如何，你的代码给我带来了解决方案，谢谢很多。

【解决方案2】：

你试过了吗

$(this).val('test');

而不是

$(this).attr('value', 'test');

val() 通常更容易，因为您需要更改的属性在不同的 DOM 元素上可能不同。

【讨论】：

【解决方案3】：

当您像这样在一个attr() command 中设置所有属性时会发生什么

$(this).attr({
               id : this.id + '_' + new_id,
               name: this.name + '_' + new_id,
               value: 'test' 
             });

【讨论】：

【解决方案4】：

编辑：根据您的评论并假设this 是被克隆的元素。

 $(this).clone()
        .attr( 'id', this.id + '_' + new_id )
        .attr( 'name', this.name + '_' + new_id )
        .val( 'test' )
        .appendTo('#someElement');

完整示例

 <script type="text/javascript">
    var new_id = 0;
    $(document).ready( function() {
       $('#container > input[type=button]').click( function() {
            var oldinp = $('input#inp')[0];
            var newinp = $(oldinp).clone()
                                  .attr('id',oldinp.id + new_id )
                                  .attr('name',oldinp.name + new_id )
                                  .val('test')
                                  .appendTo($('#container'));
            $('#container').append('<br>');
            new_id++;
        });
     });
 </script>


 <div id="container">
 <input type="button" value="Clone" /><br/>
 <input id="inp" name="inp" type="text" value="hmmm" /><br/>
 </div>

【讨论】：

@TStamper：是的，我明白了，但这不起作用。 @tvanfosson：在这里更改 id 之前的值不起作用，因为表单元素是另一个元素的克隆，所以首先它必须获得一个唯一的 id。
@schneck -- 我已经更新了关于克隆元素的答案。

【解决方案5】：

使用.val() 而不是attr('value')。

【讨论】：