在 jQuery 中替换元素并返回新元素

Question

如何在 jQuery 中替换元素并返回替换元素而不是被删除的元素？

我有以下情况。我有很多复选框，一旦您单击其中一个，该复选框就会被加载图标替换。一旦发生了一些 AJAX 问题，加载图标就会被一个勾号图标取代。

使用 jQuery 的 replaceWith，你会做这样的事情：

$("input[type='checkbox']").click(function() {

  $(this).replaceWith("<img src='loading.jpg' alt='loading'/>");
  $.post("somepage.php");
  $(this).replaceWith("<img src='tick.jpg' alt='done'/>"); 

});

但是，这不起作用，因为replaceWith 返回的是被删除的元素，而不是被添加的元素。所以在 AJAX 完成后，loading.jpg 将永远留在那里。

有没有什么方法可以在不选择的情况下返回替换元素？

提前致谢。

Answer 1

如果没有必要专门使用 replaceWith 方法 - 您可以使用与 replaceWith 相反的 replaceAll 方法。

在这里查看答案：(answer to a similar question asked a year later) replaceAll 将作为参数传递的对象中的每个元素或与作为参数传递的选择器匹配的元素替换为匹配的元素，并返回匹配的元素（新内容）。

这样，tvanfosson 回答中的编辑（以及 Keeper 回答中的代码）将如下所示：

$("input[type='checkbox']").click(function() {
    var loading = $("<img src='loading.jpg' alt='loading' />").replaceAll($(this));
    $.post("somepage.php", function() {
        loading.replaceWith("<img src='tick.jpg' alt='done'/>");
    });
});

这只是缩短了一行，但为了简洁起见，并包括使用 replaceAll() 的选项，我认为适合将此答案添加到这个旧的和更多查看的问题。

Answer 2

我编写了一个小插件来实现类似的结果，因为我希望能够在一行代码中检索新项目的指针。

(function($){
    $.fn['overwrite'] = function(target){
        $(target).replaceWith(this);
        return this;
    }
}(jQuery));

使用示例：

$("input[type='checkbox']").click(function() {
    var $loading = $("<img src='loading.jpg' alt='loading' class='loading-image' />").overwrite( this );
    $.post("somepage.php", function() {
        $loading.replaceWith("<img src='tick.jpg' alt='done'/>");
    });
});

Answer 3

检查这个。

$.fn.replaceWithMod = function(obj) {
var $a = $(obj);
this.replaceWith($a);
return $a;  
};

var newObj  = $('a').replaceWithMod('<div>New Created Object</div>');
$(newObj).css('color','green');

Answer 4

为什么不像这样制作一个中间 jquery 对象？...

$("input[type='checkbox']").click(function() {
    var insertedElement = $("<img src='loading.jpg' alt='loading'/>");
    $(this).replaceWith(insertedElement);
    $.post("somepage.php");
    var anotherInsertedElement = $("<img src='tick.jpg' alt='done'/>");
    $(this).replaceWith(anotherInsertedElement);
    //do something with either of the inserted elements
});

Answer 5

你可以使用索引给它一个唯一的ID：

$("input[type='checkbox']").click(function() {
  var index = $("input[type='checkbox']").index(this);
  $(this).replaceWith("<img src='loading.jpg' id='myLoadingImage" + index + "' alt='loading'/>");
  $.post("somepage.php");
  $('#myLoadingImage'+index).replaceWith("<img src='tick.jpg' alt='done'/>"); 

});

Answer 6

给加载图片一个类，然后在 post 回调中，使用该类作为选择器来查找刚刚注入的图片。

$("input[type='checkbox']").click(function() {
  $(this).replaceWith("<img src='loading.jpg' alt='loading' class='loading-image' />");
  $.post("somepage.php", function() {
      $('.loading-image').replaceWith("<img src='tick.jpg' alt='done'/>");
  });
});

如果您可能同时运行多个此类，则可以获取最近的 this 父级，并在搜索类时将其用作上下文。

编辑：另一种替代方法，它使用变量来存储新元素，并且无需在函数返回时应用类和搜索新元素。

$("input[type='checkbox']").click(function() {
  var loading = $("<img src='loading.jpg' alt='loading' />");
  $(this).replaceWith(loading);
  $.post("somepage.php", function() {
      loading.replaceWith("<img src='tick.jpg' alt='done'/>");
  });
});

Answer 7

您的代码不起作用的原因是第一个 replaceWith 替换了 this 所指的项目。第二个 replaceWith 尝试再次替换它，但由于它已经消失了，所以没有什么可以替换的。并且勾号图标不会显示。

最好的办法是使用 tvanfosson 建议的 post 回调函数。

Answer 8

创建一个元素并将其用作replaceWith的参数：

$('input[type=checkbox]').click(function() { var img = document.createElement('img'); img.src = 'loading.jpg'; $(this).replaceWith(img); $.post('somepage.php', function() { $(img).replaceWith('<img src="tick.jpg" alt="done"/>'); }); });