jQuery的不追加整個生成的HTML（td標籤）

Question

我有這樣的代碼：

var priceTextField = $("<td>").append(
    $("<input>") 
    .addClass("form-control input-sm") 
    .attr("type", "text") 
    .attr("placeholder", "Input something or delete me!") 
); 

而且通過附加當...

var priceDataRow = $("<tr>").append(
    priceTextField.clone().find("input").addClass("text-quantity") 
).append(
    priceTextField.clone().find("input").addClass("text-price") 
).append(
    $("<td>").append(
    $("<button>") 
    .addClass("btn btn-danger btn-sm btn-block delete-btn") 
    .attr("type", "button") 
    .text("Delete") 
) 
); 

從priceTextField克隆的<td>包裝不出現。但是，按鈕<td>包裝。

輸出示例：

<tr> 
    <input class="form-control input-sm text-quantity" type="text" placeholder="Input something or delete me!" value="444"> 
    <input class="form-control input-sm text-price" type="text" placeholder="Input something or delete me!" value="44"> 
    <td> 
    <button class="btn btn-danger btn-sm btn-block delete-btn" type="button">Delete</button> 
    </td> 
</tr> 

我錯過了一些東西明顯？如果有人能夠指引我，我會感激不盡。

乾杯

Answer 1

當你這樣做：priceTextField.clone().find("input").addClass("text-quantity")您本人的輸入字段和附加這一點。不是<td>。因爲使用find()

https://api.jquery.com/find/

描述：獲取後裔在當前組的 匹配的元素的每個元件中，通過選擇器，jQuery對象，或元件的過濾。

你需要的是end()，這樣你可以選擇<td>本身。

https://api.jquery.com/end/

描述：結束最近濾波操作在當前 鏈和匹配的元素返回到其先前的狀態。

Answer 2

使用.end()

priceTextField.clone().find("input").addClass("text-quantity").end() 

Answer 3

你只追加投入要素嘗試。這是jQuery的工作原理：

第一個示例返回您之前創建的「td」的克隆。

priceTextField.clone() 

但是，當你這樣做時，「input」元素將被返回。

priceTextField.clone().find("input") 

你需要做的是在一個變量第一像這樣保存的：

var priceDataRow = $("<tr>"); 
var clonedTd = priceTextField.clone(); 
clonedTd.find("input").addClass("text-quantity"); 
$(priceDataRow).append(clonedTd);