用jQuery替换DOM中的元素

我试图替换dom中的一个元素，以便在更新表行时它会发生更改，但没有成功。 我试过：

$(this).closest("tr").find(".nameDom").text("new value");

但这对我不起作用。 我还尝试了这段代码的几个变体，但没有结果

我将非常感谢关于这个问题的任何提示

以下是我的html结构的屏幕截图：

以下是整个jQuery函数：

$(document).ready(function() {
    $("#saveBtn").on("click",function() {

        var productId = $("#productIdModal").val();
        var productName = $("#productNameModal").val();
        var productBrand = $("#productBrandModal").val();
        var productPrice = $("#productPriceModal").val();

        var jUpdatedProduct = {};
        jUpdatedProduct.id = productId;
        jUpdatedProduct.name = productName;
        jUpdatedProduct.brand = productBrand;
        jUpdatedProduct.price = productPrice;

        console.log(JSON.stringify(jUpdatedProduct));
        // console.log( jQuery.isEmptyObject(jUpdatedProduct));

        $(this).closest("tr").find(".nameDom").text("new val");
        $(this).closest("tr").find(".brandDom").text("new val");
        $(this).closest("tr").find(".priceDom").text("new val");

        $.ajax
        ({
            type: "GET",
            dataType : 'json',
            async: false,
            url: 'edit-product.php',
            data: { data: JSON.stringify(jUpdatedProduct) },
            success: function () {console.log("Thanks!"); },
            failure: function() {console.log("Error!");}
        });
    });
});

下面是saveBtn所属的modal的代码：

<div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <div class="form-group">
          <input type="productId" class="form-control" id="productIdModal" readonly>
      </div>
        <div class="form-group">
          <input type="productNameModal" class="form-control" id="productNameModal" placeholder="Product Name">
      </div>
       <div class="form-group">
          <input type="productBrandModal" class="form-control" id="productBrandModal" placeholder="Brand">
      </div>
      <div class="form-group">
        <input type="number" class="form-control" id="productPriceModal" placeholder="Price">
      </div>
      </div>
      <div class="modal-footer">
      <button type="button" id="saveBtn" class="btn btn-success" data-dismiss="modal">Save</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>

您使用的是链接到“保存”按钮的事件单击，而不是链接到表。这就是为什么您不能选择正确的元素，从而更新其值

请尝试下面的代码，假设当前页面中只有1个html表，如果没有，则需要在下面的代码选择器中添加该表的id：

//Debug what element is getting selected in jquery first by using console commands 
console.info($(this) );
console.info('table');

$('table').closest("tr").find(".nameDom").text("new val");
$('table').closest("tr").find(".brandDom").text("new val");
$('table').closest("tr").find(".priceDom").text("new val"); 

应使用上述代码替换这些现有行：

$(this).closest("tr").find(".nameDom").text("new val");
$(this).closest("tr").find(".brandDom").text("new val");
$(this).closest("tr").find(".priceDom").text("new val");

---

显示HTML，可能是你需要的。val'new value'和它指的是什么？显示你的HTML和js代码，一行可能不够。我刚刚上传了一个屏幕截图。保存按钮在哪里？应该在你的其他帖子中提到这一点，但如果你有多个按钮，它们应该具有唯一的id或只是使用一个类。引用具有相同id的多个元素可能会产生意外后果。这是未定义的行为，因为规范规定id对于文档应该是唯一的。@Robert请检查答案，如果这有帮助。$'lblEditDeleteProducts'。closesttr.find.nameDom.textnew val；-我试过这个，但没用。但这可能是我的无能。您忘记为id$'lblEditDeleteProducts'.closesttr.find.nameDom.te添加‌​xtnew val；始终执行console.info$'lblEditDeleteProducts'或console.log$'lblEditDeleteProducts'检查jquery选择器是否选择了正确的元素。@RobertRoss.closest在从当前选定元素向上遍历dom级别时不起作用。Try.find这应该适用于$'lblEditDeleteProducts'。findtr.nameDom.textnew val；