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

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

$("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 2

创建一个元素并将其用作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"/>');
    });
});

Answer 3

您可以使用索引为其指定唯一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 4

您的代码不起作用的原因是第一个 replaceWith 替换此引用的项目。第二个 replaceWith 尝试再次替换它，但由于它已经消失，因此无需替换。并且不会显示刻度图标。

您最好的选择是使用tvanfosson建议的回调后功能。

Answer 5

检查一下。

$.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 6

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

(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 7

如果没有必要专门使用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 8

为什么不制作一个像这样的中间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
});

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

8 个答案: