jquery: reemplace las entradas con tramos

Question

Estoy tratando de reemplazar las entradas con tramos que contienen los valores de entrada de tal manera que pueda volver a hacerlas al hacer clic en un botón. Me imagino que esto se haría más fácilmente en dos etapas: agregar <span>[input value]</span> en frente de las entradas, y luego ocultar las entradas. El único problema es que estoy teniendo problemas con la primera parte. Estoy intentando cosas como

$('#container').find('input') 
    .parent() 
    .prepend('<span></span>') // this effectively creates: <span></span><input value=____> 

Sin embargo, dentro de la instrucción anteponer $ (this) parece que no está definido, por lo que no puedo hacer

.prepend('<span>'+$(this).children('input').val()+'</span>') 

Puesto que hay varias entradas, no puedo Simplemente ponga el valor de entrada en una variable. ¿Cómo haría esto?

Answer 1

Para la pregunta actualización:

Puede hacer algo como esto (basando esto en los comentarios, una edición por fila):

$('input', context).each(function() { 
    $("<span />", { text: this.value, "class":"view" }).insertAfter(this); 
    $(this).hide(); 
}); 

You can view a more detailed demo here, with per-row edit toggling.

---

Para la pregunta original:

usted querrá utilizar para este .replaceWith():

$('#container').find('input').each(function() { 
    $(this).replaceWith("<span>" + this.value + "</span>"); 
}); 

El .each() crea un cierre en el que this se refiere al elemento de entrada, por lo que puede use this.value por ejemplo.

Para asegurarse de que la codificación es atendido, ampliar un poco para utilizar .text(), así:

$('#container').find('input').each(function() { 
    $(this).replaceWith($("<span />").text(this.value)); 
});​ 

You can try a demo here

Answer 2

me parece la solución más fácil sería cambiar las entradas de solo lectura y quite el borde (y posiblemente cambie el color de fondo, dependiendo de su UI), lo que esencialmente hace que aparezcan como una etiqueta normal <span>.

function spanify() { 
    $('#container input') 
    .attr("readonly", "readonly") 
    .css("borderWidth", "0"); 
} 

function despanify() { 
    $('#container input') 
    .removeAttr("readonly") 
    .css("borderWidth", "auto"); 
} 

¿Es eso posible?