Question

我有一个元素列表，每个元素都针对这样的文件：

<ul>
  <li id="G367" class="list-group-item">
    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">2015-10-21-1445461638-8821023-ag_0666.jpeg</button>
    (...)
    <li id="G366" class="list-group-item btn btn-secondary">
    (...)
  </li>
</ul>

在下拉操作中，我分别获得了一个替换功能，该功能删除了文件并将其替换为新文件。

我想通过替换行的contentText和id属性来更新行。显然可以，但是 DOM未更新，并继续跟踪旧ID。

进一步阅读，我发现不建议更改ID。我不明白为什么。在这种情况下，如何替换行？

这是我使用的js：

// Replace file

$(document).on('submit', '#replace-file', function (e) {
    e.preventDefault();
    let formData = new FormData(this);
    $.ajax(
        {
            url: this.action,
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
        }).done(function (resp) {
        $('#' + resp.old_ref)[0].firstElementChild.textContent = resp.data;
        $('#' + resp.old_ref).attr('id', resp.new_ref);

        $('#form-modal').modal('toggle');
    });
});

Answer 1

您必须使用innerHTML而不是textContent

尝试一下

$('#' + resp.old_ref)[0].firstElementChild.innerHTML= resp.data;

Answer 2

销毁整个元素并替换为具有正确ID的新元素：

var li =  $('#' + resp.old_ref); 
li.closest("ul").append("<li id='" + resp.new_ref + "'>" + resp.data + "</li>"); 
li.remove();

用ID替换列表元素，覆盖它并更新DOM

2 个答案: