blocks|key|4861376|text|你可以使用索引给它一个唯一的id：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4861377|$("input[type='checkbox']").click(function()+{
++var+index+=+$("input[type='checkbox']").index(this);
++$(this).replaceWith("<img+src='loading.jpg'+id='myLoadingImage"+%2B+index+%2B+"'+alt='loading'/>");
++$.post("somepage.php");
++$('#myLoadingImage'%2Bindex).replaceWith("<img+src='tick.jpg'+alt='done'/>");+

});|code-block|syntax|javascript|4861378|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could give it a unique id using the index:

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

});
</code></pre>

blocks|key|1265060|text|给加载图像一个类，然后在post回调中，使用这个类作为选择器来查找您刚刚注入的图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1265061|$("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'/>");
++});
});|code-block|syntax|javascript|1265062|如果您可能同时运行其中的几个，则可以获得最接近this的父类，并在搜索该类时将其用作上下文。|offset|length|style|CODE|1265063|编辑：另一个替代方法，它使用一个变量来存储新元素，并在函数返回时消除了应用类和搜索新元素的需要。|BOLD|1265064|$("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'/>");
++});
});|1265065|entityMap^0|0|0|N|4|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Y|8|@$I|Z|J|10|K|O]]|9|@]|A|$]]|$1|P|3|Q|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

Give the loading image a class, then in the post callback, use the class as a selector to find the image you've just injected.

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

If you may have several of these running at a time, you can get the closest parent of <code>this</code> and use that as the context when searching for the class.

EDIT: Another alternative that uses a variable to store the new element and removes the need to apply the class and search for the new element when the function returns.

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

blocks|key|4861460|text|为什么不做一个中间的jquery对象，像这样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4861461|$("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
});|code-block|syntax|javascript|4861462|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why not make an intermediate jquery object, like this?...

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

blocks|key|797616|text|代码不能工作的原因是第一个replaceWith替换了这个引用的项。第二个replaceWith尝试再次替换它，但由于它已经消失，因此没有什么可替换的。并且不会显示勾号图标。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|797617|最好的办法是使用tvanfosson建议的post回调函数。|797618|entityMap^0|D|B|R|2|11|B|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

The reason your code doesn't work is that the first replaceWith replaces the item that this refers to. The second replaceWith attempts to replace it again, but since it is already gone, there is nothing to replace. And the tick icon won't get shown.

Your best bet is to use the post callback function that tvanfosson suggests.

blocks|key|1265101|text|看看这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1265102|$.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');|code-block|syntax|javascript|1265103|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Check this. 

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

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

blocks|key|1261085|text|我写了一个小插件来实现类似的结果，因为我喜欢在一行代码中检索新项目的指针。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1261086|(function($){
++++$.fn['overwrite']+=+function(target){
++++++++$(target).replaceWith(this);
++++++++return+this;
++++}
}(jQuery));|code-block|syntax|javascript|1261087|使用示例：|1261088|$("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'/>");
++++});
});|1261089|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I wrote a little plugin to achieve a similar result because I like to be able to retrieve a pointer for the new item in one line of code.

<pre><code>(function($){
 $.fn['overwrite'] = function(target){
 $(target).replaceWith(this);
 return this;
 }
}(jQuery));
</code></pre>

Usage example:

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

blocks|key|1261115|text|如果不需要特别使用replaceWith方法-您可以使用与replaceWith相反的replaceAll方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1261116|在这里可以看到答案：(answer+to+a+similar+question+asked+a+year+later)+replaceAll将作为参数传递的对象中的每个元素或与作为参数传递的选择器匹配的元素替换为匹配的元素，并返回匹配的元素(新内容)。|offset|length|1261117|这样，tvanfosson答案中的编辑(以及Keeper答案中的代码)将如下所示：|1261118|$("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'/>");
++++});
});|code-block|syntax|javascript|1261119|它只短了一行，但为了简洁，并包括使用replaceAll()的选项，我认为合适地将这个答案添加到这个旧的、更受欢迎的问题中。|1261120|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4399424/using-this-after-replacewith/4399529#4399529^0|0|A|1D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

If there isn't a necessity to use specifically the replaceWith method - you could use the replaceAll method which is the opposite to replaceWith.

See the answer here: <a href="https://stackoverflow.com/questions/4399424/using-this-after-replacewith/4399529#4399529">(answer to a similar question asked a year later)</a>
replaceAll replaces each element in the object passed as the parameter or the elements matching the passed selector as the parameter with the matched elements and returns the matched elements (the new content).

That way, the edit in tvanfosson's answer (and the code at Keeper's answer) would look like this:

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

It's only a line shorter but for brevity and to include the option to use replaceAll() I saw fit to add this answer to this old and more-viewed question.

How do you replace an element in jQuery and have the replacement element returned instead of the element that was removed?

I have the following scenario. I have many checkboxes and once you click one of them, that checkbox is replaced by a loading icon. Once some AJAX stuff happens, the loading icon is replaced by a tick icon.

Using jQuery's <a href="http://docs.jquery.com/Manipulation/replaceWith" rel="noreferrer"><code>replaceWith</code></a>, you'd do something like:

<pre><code>$("input[type='checkbox']").click(function() {

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

});
</code></pre>

However, this doesn't work because <code>replaceWith</code> returns the element that was removed, not the one which was added. So after the AJAX stuff completes, <code>loading.jpg</code> will just stay there forever.

Is there some way I can return the replacement element without selecting it?

Thanks in advance.

Replacing an element and returning the new one in jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何替换jQuery中的元素，并返回替换元素而不是被删除的元素？我有以下场景。我有很多复选框，一旦你点击其中一个，这个复选框就会被一个加载图标所取代。一旦发生了一些AJAX事件，加载图标就会被一个勾号图标所取代。使用jQuery的，你可以这样做：$("input[type='checkbox']").click(fun...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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