jquery: remplace les entrées par des étendues

J’essaie de remplacer les entrées par des plages contenant les valeurs d’entrée de manière à pouvoir les rétablir en cliquant sur un bouton. Je pense que cela se ferait le plus facilement en deux étapes: append [input value] devant les entrées, puis masquer les entrées. Le seul problème est que j’ai des problèmes avec la première partie. J’essaie des choses comme

 $('#container').find('input') .parent() .prepend('') // this effectively creates:  

Cependant, à l’intérieur de l’instruction prepend, $ (this) semble être indéfini, donc je ne peux pas

  .prepend(''+$(this).children('input').val()+'') 

Puisqu’il y a plusieurs entrées, je ne peux pas simplement mettre la valeur d’entrée dans une variable. Comment je ferais ça?

Pour la question mise à jour:

Vous pouvez faire quelque chose comme ceci (basé sur des commentaires, une édition par ligne):

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

Vous pouvez voir une démonstration plus détaillée ici, avec une bascule d’édition par ligne .


Pour la question initiale:

Vous voudrez utiliser .replaceWith() pour cela:

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

Le .each() crée une fermeture dans laquelle this réfère à l’élément input, vous pouvez donc utiliser this.value par exemple.

Pour vous assurer que l’encodage est pris en charge, développez-le un peu pour utiliser .text() , comme ceci:

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

Vous pouvez essayer une démo ici

Il me semble que la solution la plus simple serait de modifier les entrées en lecture seule et de supprimer la bordure (et éventuellement de changer la couleur d’arrière-plan, en fonction de votre interface utilisateur), ce qui les fait essentiellement apparaître sous la forme d’une étiquette standard.

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

Est-ce faisable?