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

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

我有下面的场景。我有许多复选框，一旦单击其中一个复选框，该复选框将替换为加载图标。一旦发生了一些AJAX事件，加载图标就会被一个勾号图标代替

使用jQuery，您可以执行以下操作：

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

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

});

$（“输入[type='checkbox']）。单击（函数（）{
$（此）。替换为（“”）；
$.post（“somepage.php”）；
$（此）。替换为（“”）；
});

但是，这不起作用，因为

replaceWith

返回已删除的元素，而不是已添加的元素。因此，在AJAX工作完成后，

load.jpg

将永远留在那里

是否有某种方法可以返回替换元素而不选择它

---

提前感谢。

您可以使用索引为其提供唯一的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'/>"); 

});

$（“输入[type='checkbox']）。单击（函数（）{
var index=$（“输入[type='checkbox']）。索引（此）；
$（此）。替换为（“”）；
$.post（“somepage.php”）；
$（“#myLoadingImage”+索引）。替换为（“”）；
});

给加载的图像一个类，然后在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'/>");
  });
});

---

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

$('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"/>');
    });
});

$（'input[type=checkbox]'）。单击（函数（）{
var img=document.createElement（'img'）；
img.src='loading.jpg'；
$（此）.替换为（img）；
$.post（'somepage.php'，function（）{
$（img）。替换为（“”）；
});
});

---

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

$（“输入[type='checkbox']）。单击（函数（）{
var insertedElement=$（“”）；
$（this）.replacetwith（insertedElement）；
$.post（“somepage.php”）；
var anotherInsertedElement=$（“”）；
$（此）.replace为（另一个插入删除）；
//对插入的任一元素执行操作
});

您的代码不起作用的原因是第一个replaceWith替换了该引用的项目。第二个replaceWith尝试再次替换它，但由于它已经不存在，因此没有什么可替换的。而勾号图标将不会显示

您最好使用tvanfosson建议的post回调函数。

检查此项

$.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');

$.fn.replaceWithMod=函数（obj）{
var$a=$（obj）；
此项。替换为（$a）；
返回$a；
};
var newObj=$（'a'）.replaceWithMod（'newcreated Object'）；
$（newObj）.css（'color'，'green'）；

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

(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'/>");
    });
});

$（“输入[type='checkbox']）。单击（函数（）{
变量$loading=$（“”）。覆盖（此）；
$.post（“somepage.php”，function（））{
$loading。替换为（“”）；
});
});

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

请看下面的答案： replaceAll将作为参数传递的对象中的每个元素或与作为参数传递的选择器匹配的元素替换为匹配的元素，并返回匹配的元素（新内容）

这样，tvanfosson答案中的编辑（以及守门员答案中的代码）将如下所示：

$("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'/>");
    });
});

$（“输入[type='checkbox']）。单击（函数（）{
变量加载=$（“”）。replaceAll（$（this））；
$.post（“somepage.php”，function（））{
加载。替换为（“”）；
});
});

---

虽然只短了一行，但为了简洁起见，并加入了使用replaceAll（）的选项，我认为这是对这一古老且更受关注的问题的回答。

对不起，我应该更清楚一些。我有很多这样的复选框，所以我不能依赖ID。我更新了代码。现在，它使用复选框的索引获得了一个唯一的id。虽然比tvanfosson快，但这仍然是一个浪费的搜索，请看Keeper的答案。此外，调用replaceWith方法后，对原始复选框$（this）的引用将丢失，因此即使在修复语法错误后，它也不起作用。此外，$.post是异步的。好的-我更正了输入错误。看过tvanfosson的帖子，并重新阅读了原始帖子，我现在理解了原始代码的意图，并同意您的评论。我喜欢这样，没有其他类或ID的干扰，您确切地知道要替换哪个img。非常干净。+1直到我用类似的代码更新了我的答案才看到这一点。我仍然会使用jQuery来创建新元素。与其使用.loading image类，不如保留对正在加载的img的引用并将其放在回调中，而不是使用$（'.loading image'）重新查找它。问题（和答案）特定于replaceWith，它返回已删除的元素，而不是创建的元素。您可以创建元素并将其引用存储在变量中，然后进行替换。在这种情况下，我认为是的，你可以使用引用，而不必再查找它。

$("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'/>");
    });
});