jquery：用跨度替換輸入

我想用包含輸入值的跨度替換輸入，以便能夠在單擊按鈕時切換它們。我認爲這最容易分兩個階段完成 - 在輸入前添加<span>[input value]</span>，然後隱藏輸入。唯一的問題是我在第一部分遇到問題。我想要的東西jquery：用跨度替換輸入

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

然而，前置聲明$內（本）似乎是不確定的，所以我不能做

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

由於有幾個輸入端，我可以」 t只需將輸入值放入一個變量中即可。我將如何做到這一點？

來源

2010-06-29 Mala

$（this）不在prepend內部 - 它與$（'＃container'）的範圍相同。它被髮送前prepend（） – partkyle 2010-06-29 17:08:22

對於更新的問題：

你可以做這樣的事情（在評論這個基礎，每行的編輯）：

$('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指的是輸入元素，這樣你就可以例如使用this.value。

要確保編碼是照顧，展開它有點使用.text()，像這樣：

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

You can try a demo here

來源

2010-06-29 17:06:12

得到評估謝謝，這工作得很好。但是，它實際上取代了投入。我希望能夠通過單擊按鈕來獲取它們，因此我想隱藏它們。對不起，我的問題更新 – Mala 2010-06-29 17:17:26

@Nick：+1：那些演示總是有用，付出很多努力，簡直是偉大的人:) – Sarfraz 2010-06-29 17:20:59

非常努力，但它沒有解決OP的問題。 'replaceWith'從字面上刪除DOM中的元素，並且OP需要來回切換。 – 2010-06-29 17:24:00

在我看來，像最簡單的解決辦法是改變輸入只讀，並刪除邊框（並可能更改背景顏色，取決於您的用戶界面），這基本上使它們顯示爲常規<span>標籤。

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

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

這樣可行嗎？

來源

2010-06-29 17:22:38

+1好的想法，但沒有，因爲我的特殊目的，這是不夠的。 – Mala 2010-06-29 17:26:36

@Mala是的，這是一個遠射。如果你有其他常規文本框以外的東西，這當然不夠好。 – 2010-06-29 17:29:10

jquery：用跨度替換輸入

回答

相關問題