Question

请帮忙！

我在页面上的div中有一些表单元素：

<div id="box">
   <div id="template">
       <div>
       <label for="username">Username</label>
       <input type="text" class="username" name="username[]" value="" / >
       <label for="hostname">hostname</label>
       <input type="text" name="hostname[]" value="">
       </div>
    </div>
</div>

使用jquery我想获取#template的副本，操纵输入的值并在#template之后插入它，结果看起来像：

<div id="box">
   <div id="template">
       <div>
       <label for="username">Username</label>
       <input type="text" class="username" name="username[]" value="" / >
       <label for="hostname">hostname</label>
       <input type="text" name="hostname[]" value="">
       </div>
    </div>
       <div>
       <label for="username">Username</label>
       <input type="text" class="username" name="username[]" value="paul" / >
       <label for="hostname">hostname</label>
       <input type="text" name="hostname[]" value="paul">
       </div>
</div>

我可能会以错误的方式进行此操作，但是在页面上的firebug中运行的javascript代码的以下测试位似乎不会更改输入的值。

var cp = $('#template').clone();

cp.children().children().each( function(i,d){
    if( d.localName == 'INPUT' ){
        $(d).val('paul'); //.css('background-color', 'red');
     }
    });
$("#box").append(cp.html());

虽然如果我取消注释“//.css('background-color'，'red'）;”输入将变为红色。

Answer 1

为什么不直接使用选择器作为输入元素，克隆为root，如下所示：

$( "input", cp ).val("paul");

而不是使用对children的调用？

编辑：看起来像jQuery 1.4，当您调用clone时，它还应该复制元素的数据而不仅仅是标记。这可能会解决您必须直接复制值的问题。相关文件（强调我的）：

withDataAndEventsA布尔值，指示是否应将事件处理程序与元素一起复制。 从jQuery 1.4开始，元素数据也将被复制。

Answer 2

我通过为主机名输入分配“hostname”类来略微修改HTML。这是更新的HTML：

<div id="box">
    <div id="template">
        <div>
            <label for="username">Username</label>
            <input type="text" class="username" name="username[]" value="" / >
            <label for="hostname">hostname</label>
            <input type="text" class="hostname" name="hostname[]" value="">
         </div>
    </div>
</div>

这是一个JS：

$(function() {
    $('#template div:first').clone().appendTo("#box");
    $('#box div:last .username').val("Paul");
    $('#box div:last .hostname').val("google");
});

此外，您可能希望查看http://wiki.github.com/nje/jquery/jquery-templates-proposal

上的jQuery模板提案

jquery的问题：操纵element的val（）属性

2 个答案: