jQuery clone（）無法按預期工作

Question

HTML代碼：

<form>
    <table>
        <tr>
            <td>Value</td>
            <td class="to">ABC</td>
        </tr>
    </table>
</form>
<div class="from" style="display:none;">
    <label>
        <input type="text" value="" placeholder="Number"/>
    </label>
</div>

和這個JavaScript代碼：

$(document).ready(function(){
          var values = [12,11,15];
          var cloned = $('div.from').find('label').clone();
          $('td.to').empty();
          for(var i=0;i<values.length;i++){
              cloned.find('input').val(values[i]);
              //console.log(cloned);
              console.log(cloned.find('input').val());
              $('td.to').append(cloned);
          }
});

我在這里嘗試從隱藏的div.from '中克隆嵌套的' label '，並從' values '數組中設置值之一，並使用相同的克隆對象將其追加到空的' td.to '。 據我所知，數組的最后一個值似乎是在克隆后附加的。 結果應該是三個克隆的嵌套標簽，其值在' values '數組的輸入框中填充。

這是jsbin鏈接： http ://jsbin.com/yuyaqu

Answer 1

您需要每次迭代一次clone() ，因此將該行放入for ：

var values = [12,11,15];
$('td.to').empty();
for (var i = 0; i < values.length; i++){
    var cloned = $('div.from').find('label').clone();
    cloned.find('input').val(values[i]);
    $('td.to').append(cloned);
}