Reemplazar un elemento y devolver el nuevo en jQuery

Question

¿Cómo se reemplaza un elemento en jQuery y se devuelve el elemento de reemplazo en lugar del elemento que se eliminó?

Tengo la siguiente situación. Tengo muchas casillas de verificación y una vez que haces clic en una de ellas, esa casilla de verificación se reemplaza por un ícono de carga. Una vez que sucede algo de AJAX, el icono de carga se reemplaza por un icono de marca.

El uso de jQuery replaceWith, que haría algo como:

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

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

}); 

Sin embargo, esto no funciona porque replaceWith devuelve el elemento que se ha eliminado, no la que se ha añadido. Así que después de que las cosas de AJAX se completen, loading.jpg se quedará allí para siempre.

¿Hay alguna manera de que pueda devolver el elemento de reemplazo sin seleccionarlo?

Gracias de antemano.

Answer 1

dar la imagen de una clase de carga, a continuación, en el puesto de devolución de llamada, utilizar la clase como un selector para encontrar la imagen que acabas inyectó .

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

Si usted puede tener varios de ellos funcionando a la vez, se puede obtener la matriz más cerca de this y usar eso como el contexto en la búsqueda de la clase.

EDIT: Otra alternativa que usa una variable para almacenar el nuevo elemento y elimina la necesidad de aplicar la clase y buscar el nuevo elemento cuando la función retorna.

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

Se podría darle un id único utilizando el índice:

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

Crear un elemento y utilizarlo como parámetro para sustituir con:?

 

$('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 4

Por qué no hacer un objeto jQuery intermedia, así ...

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

La razón su código no funciona es que el primer replaceWith reemplaza el elemento que se refiere a. El segundo replaceWith intenta reemplazarlo de nuevo, pero como ya no está, no hay nada para reemplazar. Y el ícono de marcar no se mostrará.

Su mejor opción es utilizar la función de devolución de llamada posterior que tvanfosson sugiere.

Answer 6

Compruebe esto.

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

escribí un pequeño plugin para lograr un resultado similar porque me gusta ser capaz de recuperar un puntero para el nuevo elemento en una línea de código.

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

Ejemplo de uso:

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

Si no hay una necesidad de utilizar específicamente el método de sustituir con - se podría utilizar el método replaceAll que es lo opuesto a Vuelvaa.

ver la respuesta aquí: (answer to a similar question asked a year later) replaceAll sustituye cada elemento en el objeto pasado como parámetro o los elementos que coinciden con el selector pasa como el parámetro con los elementos coincidentes y devuelve los elementos coincidentes (el nuevo contenido).

De esa manera, la edición en la respuesta de tvanfosson (y el código en la respuesta de Guardián) se vería así:

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

Es sólo una línea más corta, pero por razones de brevedad y que incluya la opción de utilizar replaceAll() Pude añadir esta respuesta a esta pregunta antigua y más vista.