Remplacement d’un élément et renvoi du nouvel élément dans jQuery

Comment remplacez-vous un élément dans jQuery et récupérez-vous l’élément de remplacement au lieu de l’élément supprimé

J’ai le scénario suivant. J’ai plusieurs cases à cocher et une fois que vous avez cliqué sur l’une d’elles, cette case est remplacée par une icône de chargement. Une fois que quelque chose AJAX se produit, l’icône de chargement est remplacée par une icône à cocher.

En utilisant replaceWith de jQuery, vous feriez quelque chose comme:

 $("input[type='checkbox']").click(function() { $(this).replaceWith("loading"); $.post("somepage.php"); $(this).replaceWith("done"); }); 

Toutefois, cela ne fonctionne pas car replaceWith renvoie l’élément qui a été supprimé, pas celui qui a été ajouté. Donc, une fois le travail AJAX terminé, https://stackoverflow.com/questions/892861/replacing-an-element-and-returning-the-new-one-in-jquery/loading.jpg y restra pour toujours.

Est-il possible de retourner l’élément de remplacement sans le sélectionner?

Merci d’avance.

Atsortingbuez une classe à l’image de chargement, puis, dans le post-rappel, utilisez-la comme sélecteur pour rechercher l’image que vous venez d’injecter.

 $("input[type='checkbox']").click(function() { $(this).replaceWith("loading"); $.post("somepage.php", function() { $('.loading-image').replaceWith("done"); }); }); 

Si vous pouvez en exécuter plusieurs à la fois, vous pouvez en obtenir le parent le plus proche et l’utiliser comme contexte lors de la recherche de la classe.

EDIT : Une autre alternative qui utilise une variable pour stocker le nouvel élément et supprime la nécessité d’appliquer la classe et de rechercher le nouvel élément lorsque la fonction est retournée.

 $("input[type='checkbox']").click(function() { var loading = $("loading"); $(this).replaceWith(loading); $.post("somepage.php", function() { loading.replaceWith("done"); }); }); 

Créez un élément et utilisez-le comme paramètre pour replaceWith:

$('input[type=checkbox]').click(function() { var img = document.createElement('img'); img.src = 'http://soffr.miximages.com/jquery/loading.jpg'; $(this).replaceWith(img); $.post('somepage.php', function() { $(img).replaceWith('done'); }); });
$('input[type=checkbox]').click(function() { var img = document.createElement('img'); img.src = 'http://soffr.miximages.com/jquery/loading.jpg'; $(this).replaceWith(img); $.post('somepage.php', function() { $(img).replaceWith('done'); }); }); 

Vous pouvez lui donner un identifiant unique en utilisant l’index:

 $("input[type='checkbox']").click(function() { var index = $("input[type='checkbox']").index(this); $(this).replaceWith("loading"); $.post("somepage.php"); $('#myLoadingImage'+index).replaceWith("done"); }); 

La raison pour laquelle votre code ne fonctionne pas est que le premier replaceWith remplace l’élément auquel il fait référence. Le second remplacement tente de le remplacer à nouveau, mais comme il est déjà parti, il n’y a rien à remplacer. Et l’icône de la coche ne sera pas affichée.

Votre meilleur choix consiste à utiliser la fonction de rappel automatique suggérée par tvanfosson.

Vérifie ça.

 $.fn.replaceWithMod = function(obj) { var $a = $(obj); this.replaceWith($a); return $a; }; var newObj = $('a').replaceWithMod('
New Created Object
'); $(newObj).css('color','green');

J’ai écrit un petit plugin pour obtenir un résultat similaire car j’aime bien pouvoir récupérer un pointeur pour le nouvel élément dans une ligne de code.

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

Exemple d’utilisation:

 $("input[type='checkbox']").click(function() { var $loading = $("loading").overwrite( this ); $.post("somepage.php", function() { $loading.replaceWith("done"); }); }); 

S’il n’est pas nécessaire d’utiliser spécifiquement la méthode replaceWith, vous pouvez utiliser la méthode replaceAll, qui est l’inverse de replaceWith.

Voir la réponse ici: (réponse à une question similaire posée un an plus tard) replaceAll remplace chaque élément de l’object transmis en tant que paramètre ou les éléments correspondant au sélecteur passé en tant que paramètre avec les éléments correspondants et renvoie les éléments correspondants (le nouveau contenu ).

Ainsi, la modification dans la réponse de tvanfosson (et le code de la réponse du gardien) ressemblerait à ceci:

 $("input[type='checkbox']").click(function() { var loading = $("loading").replaceAll($(this)); $.post("somepage.php", function() { loading.replaceWith("done"); }); }); 

Ce n’est qu’une ligne plus courte, mais pour des raisons de brièveté et pour inclure l’option d’utiliser replaceAll (), j’ai jugé bon d’append cette réponse à cette question ancienne et plus fréquemment consultée.

Pourquoi ne pas créer un object jquery intermédiaire, comme ceci? …

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