Sostituzione di un elemento e restituzione di quello nuovo in jQuery

Question

Come sostituire un elemento in jQuery e restituire l'elemento di sostituzione anziché l'elemento rimosso?

Ho il seguente scenario. Ho molte caselle di controllo e una volta che si fa clic su una di esse, tale casella di controllo viene sostituita da un'icona di caricamento. Una volta che alcune cose AJAX si verificano, l'icona di caricamento viene sostituita da un'icona di spunta.

Utilizzando jQuery replaceWith, si farebbe una cosa del genere:

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

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

}); 

Tuttavia, questo non funziona perché replaceWith restituisce l'elemento che è stato rimosso, non quello che è stato aggiunto. Quindi, una volta completato il materiale AJAX, loading.jpg rimarrà lì per sempre.

C'è un modo per restituire l'elemento di sostituzione senza selezionarlo?

Grazie in anticipo.

Answer 1

Dare il caricamento dell'immagine di una classe, poi nel post callback, utilizzare la classe come selettore per trovare l'immagine che hai appena iniettato .

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

Se si può avere molti di questi in esecuzione alla volta, è possibile ottenere il genitore più vicino di this e utilizzarlo come contesto per la ricerca per la classe.

EDIT: Un'altra alternativa che utilizza una variabile per memorizzare il nuovo elemento ed elimina la necessità di applicare la classe e la ricerca per il nuovo elemento quando la funzione restituisce.

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

Si potrebbe dare un ID univoco utilizzando l'indice:

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

Creare un elemento e usarlo come parametro per 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 4

perché non fare un oggetto jQuery intermedia, come questo ...

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

Il motivo per il codice non funziona è che il primo replaceWith sostituisce l'articolo che si riferisce a questo. Il secondo replaceWith tenta di sostituirlo di nuovo, ma poiché è già andato, non c'è nulla da sostituire. E l'icona del segno di spunta non verrà mostrata.

La soluzione migliore è utilizzare la funzione di callback post suggerita da tvanfosson.

Answer 6

Controllare questo.

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

ho scritto un po 'di plugin per ottenere un risultato simile, perché mi piace essere in grado di recuperare un puntatore per il nuovo elemento in una riga di codice.

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

Esempio di utilizzo:

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

Se non c'è una necessità di utilizzare specificamente il metodo ReplaceWith - è possibile utilizzare il metodo replaceAll che è l'opposto di ReplaceWith.

Vedere la risposta qui: (answer to a similar question asked a year later) replaceAll sostituisce ciascun elemento nell'oggetto passato come parametro o gli elementi corrispondenti selettore passato come parametro con gli elementi corrispondenti e restituisce gli elementi corrispondenti (il nuovo contenuto).

In questo modo, la modifica in risposta di tvanfosson (e il codice a risposta di Keeper) sarebbe simile a questa:

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

E 'solo una linea più breve, ma per brevità e per includere la possibilità di utilizzare replaceAll() Ho ritenuto opportuno aggiungere questa risposta a questa domanda vecchia e più vista.