jquery：用跨度替换输入

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

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

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

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

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

Answer 1

对于更新的问题：

你可以这样做（基于评论，每行编辑）：

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

您可以在此处查看更详细的演示，每行编辑切换 。

---

对于原始问题：

你会想要使用.replaceWith() ：

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

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

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

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

你可以在这里试一下

Answer 2

在我看来，最简单的解决方案是将输入更改为只读并删除边框（并可能更改背景颜色，具体取决于您的UI），这实际上使它们显示为常规标签。

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

这可行吗？