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);

jQuery没有追加整个生成的HTML（td标签）

3 个答案: