jquery：用跨度替换输入

我正在尝试用包含输入值的跨度替换输入,以便能够在单击按钮时将其切换回来.我认为这最容易分两个阶段完成 – 添加< span> [输入值]< / span>在输入前面,然后隐藏输入.唯一的问题是我在第一部分遇到了麻烦.我正在尝试这样的事情

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

但是,在prepend语句里面$(this)似乎是未定义的,所以我不能这样做

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

由于有几个输入,我不能简单地将输入值放入变量中.我该怎么办？

解决方法

对于更新的问题：

你可以这样做(基于评论,每行编辑)：

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

对于原始问题：

您将要使用.replaceWith()：

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

.each()创建一个闭包,其中this引用input元素,因此您可以使用this.value作为示例.

为了确保编码得到处理,请将其展开一些以使用.text(),如下所示：

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

You can try a demo here