Cómo mantener una referencia jQuery usando sustituir con

Si tenemos un ejemplo de estructura de la siguiente manera:Cómo mantener una referencia jQuery usando sustituir con

HTML

<div id="foo">hello foo</div>

var $foo = $('#foo');

y tenemos que reemplazar el código HTML completo para esa referencia de jQuery/nodo dada usando el método .replaceWith de jQuery , ¿cuál es la mejor práctica para mantener, respectivamente, obtener un nuevo nodo de referencia?

El problema, .replaceWith devuelve la referencia al antiguo objeto jQuery (que me parece más o menos irrazonable). De los documentos:

Sin embargo, debe tenerse en cuenta que se devuelve el objeto jQuery original. Este objeto se refiere al elemento que se ha eliminado del DOM, , no el nuevo elemento que lo ha reemplazado.

Si voy como

$foo = $foo.replaceWith('<div>new content</div>');

Me gustaría tener ese nuevo nodo referenciado/caché en esa misma variable. Sí, podrías volver a consultar ese nodo DOM recién insertado, pero eso parece muy torpe en mi mente.

¿Hay alguna manera complicada de lograr eso sin la necesidad de volver a consultar el DOM?

Ejemplo: http://jsfiddle.net/Lm7GZ/1/

Fuente

2012-10-01 Andre Meinhold

Sólo algunos antecedentes: aunque yo entiendo por qué se siente como si regresara al _ "viejo" _ referencia es razonable (o ilógico) tiene sentido. Supongamos que ha vinculado varios escuchas de eventos a este elemento, dependiendo de las acciones del usuario, todos esos oyentes y devoluciones de llamadas tienen que ser eliminados (para evitar fugas), pero es posible que desee conservar algunos de ellos para usarlos posteriormente, o puede quiero restaurar el elemento viejo Si el antiguo elemento DOM fuera eliminado por completo, eso significaría volver a vincular a todos los oyentes, también. Esto, en todo caso, se sentiría aún más torpe y ralentizaría el guión. –

@EliasVanOotegem: No estoy seguro si te entiendo bien, pero para ese caso hay '.fn.detach() 'disponible, que tendría mucho más sentido almacenar una referencia" anterior "a un nodo con todos los oyentes y datos explícitamente, si así lo desea. Pero pasé por alto '.replaceAll', que hace bastante lo que esperaba. –

Estaba pensando en un caso que encontré recientemente en particular, quizás entonces mi comentario tendría más sentido: supongamos que una tabla, con algunos html, al hacer clic en una fila se reemplaza por un formulario, utilizando el método 'replaceWith'. Después de enviar el formulario (ajax), se restauran los nodos originales, junto con sus oyentes y controladores, que nunca se "han ido". en resumen: los nuevos nodos eran temporales, los "viejos" no. Ahí es cuando una referencia a los nodos antiguos es muy práctica para tener por ahí, sin necesidad de separar y volver a conectar nada ... –

utilizar la función .replaceAll():

$foo = $('<div>new content</div>').replaceAll($foo);

Fuente

2012-10-01 11:06:22

Usted puede utilizar replaceAll(), cambiando la fuente con el objetivo de:

$foo = $('<div>new content</div>').replaceAll($foo);

Fuente

2012-10-01 11:06:28

podemos utilizar de cualquier manera de la siguiente:

$foo = $('<div id="foo">hello foo</div>').replaceAll('#foo'); //As a target string;

$foo = $('#foo'); 
$foo = $('<div id="foo">hello foo</div>').replaceAll($foo); //As a jQuery Object;

También podemos hacer las consultas encadenadas:

$('<div id="foo">hello foo</div>').replaceAll('#foo').find('something into the newly added html')......

Fuente

2014-05-25 11:14:15

Cómo mantener una referencia jQuery usando sustituir con

Respuesta

Cuestiones relacionadas