如何使用Jquery在錨標記內附加一個輸入？

請幫忙，我得到了一個跨度裏面的錨標記，使用jquery我如何追加一個輸入而不會丟失跨度並使用實際值！如何使用Jquery在錨標記內附加一個輸入？

我得到這個

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span> **Juan David**</a>

我想用價值胡安·大衛作爲輸入

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span><input type="text" name="newid" value="**Juan David**"> </a>

跨度類的價值=「藍色」是不是在某些情況下，我的意思是相同的它改變

我試圖

$('a.fieldEditable').append('<input type="text" name="newid" value="">');

結果

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span> **Juan David**<input type="text" name="newid" value="**HOW MOVE THE VALUE JUAN DAVID TO HERE??**"></a>

差不多完成了我需要一些幫助！

來源

2012-11-21 David Noreña

不只是一個錯誤試圖使它在大膽的風格！在這種情況下，該值始終是一個名字胡安·戴維 –

你想在''內搜索''*？ – Sampson

瞄準textNodes是有點難度，但這裏有一個方法：

$(".fieldEditable") 
    .contents() 
    .filter(textNodes) 
    .each(function(index, object){ 
     $("<input>", { 
      type: "text", 
      value: object.textContent.trim() 
     }).replaceAll(this).before(" "); 
    }); 

function textNodes() { 
    return this.nodeType === 3 && this.textContent.trim().length; 
}

<a class='fieldEditable' href='#'> 
    <span class='blue'>Id. Usuario</span> 
    Juan David 
</a>

導致以下：

<a class="fieldEditable" href="#"> 
    <span class="blue">Id. Usuario</span> 
    <input type="text" value="Juan David"> 
</a>

演示：http://jsfiddle.net/TxvYE/

來源

2012-11-21 05:07:26 Sampson

很酷..不知道通過'nodeType'訪問文本節點非常簡單.. –

您可以更改標記：

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span><span id='target'>**Juan David**</span></a>

和JS：

$('a.fieldEditable').append('<input type="text" name="newid" value="">'); 
$('input[name=newid]').val($('#target').text());

來源

2012-11-21 04:46:39

是的，但如何清除刪除span id target！？ –

$（'＃target'）。remove（）; –

$（'a.fieldEditable'）。live（'click'，function（）{（'a.fieldEditable'）。append（' '）; $（'input [name = newid]'）。val（$（'＃target'）。text（）） $（'＃target'）。remove（）; }）; –

試試這個：

var v=$('a.fieldEditable').html(); 
var newHTML=v+'<input type="text" name="newid" value="">'; 
$('a.fieldEditable').html(newHTML);

來源

2012-11-21 04:52:52

v是未定義的原因！ –

我已編輯...現在嘗試 –

使用容器

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span><span id='target'>**Juan David**</span></a>

然後將其更換方便：

var target = $('#target'); 
target.replaceWith($('<input/>').val(target.text())

來源

2012-11-21 05:02:20

是啊正是我在尋找感謝Gaurav Shah它工作得很好 –

當你覺得它很好，你應該upvote答案，你應該接受一個答案，如果它適合你的問題或解決你問題 - SO社區的工作方式 –

ja ok我在這個頁面是新的！謝謝 –

不改變你的標記 - 並使用JavaScript正則表達式，你可以使用這個：

var inner = $('.fieldEditable').html(); 
var re = /(<span.*<\/span>) ([\s\S]+)/i; 
var m = re.exec(inner); 
if(m != null && m.length == 3) { 
    var span = m[1]; 
    var person = m[2] 
    $('.fieldEditable').html(span + '<input type="text" name="newid" value="' + person + '">') 
}

來源

2012-11-21 05:21:36

如何使用Jquery在錨標記內附加一個輸入？

回答

相關問題