jquery: remplace les entrées par des travées

Question

J'essaie de remplacer les entrées par des travées contenant les valeurs d'entrée de manière à pouvoir les remettre en marche en cliquant sur un bouton. Je pense que ce serait plus facile en deux étapes - en ajoutant <span>[input value]</span> devant les entrées, puis en masquant 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('<span></span>') // this effectively creates: <span></span><input value=____> 

Cependant, dans l'instruction préfix $ (this) semble être indéfini, donc je ne peux pas faire

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

Comme il y a plusieurs entrées, je peux » t simplement mettre la valeur d'entrée dans une variable. Comment ferais-je cela?

Answer 1

Pour la question mise à jour:

Vous pouvez faire quelque chose comme ça (se basant sur ce commentaire, modifié par ligne):

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

---

Pour la question initiale:

Vous voulez utiliser .replaceWith() pour cela:

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

Le .each() crée une fermeture dans laquelle this fait référence à l'élément d'entrée, de sorte que vous pouvez utilisez this.value par exemple.

Pour le codage vous est pris en charge, développez un peu à utiliser .text(), comme ceci:

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

You can try a demo here

Answer 2

Il me semble que la solution la plus simple serait de changer les entrées readonly et supprime la bordure (et peut-être changer la couleur d'arrière-plan, en fonction de votre interface utilisateur), ce qui les fait essentiellement apparaître comme une étiquette <span> régulière.

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

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

Est-ce faisable?