jquery:用跨度替换输入

Question

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

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

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

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

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

Answer 1

对于更新的问题:

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

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

对于原始问题:

你想要.replaceWith()用于此:

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

在.each()创建一个封盖,其this指的是输入元件,所以可以使用this.value例如.

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

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