Question

请帮助，我得到了一个带有跨度的锚标记，使用Jquery如何在不丢失跨度和使用实际值的情况下附加输入！??

我得到了这个

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

我想使用值Juan David作为输入值

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

span class ='blue'在某些情况下不一样我的意思是它会改变

我试过

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

差不多完成我需要一些帮助!!!

Answer 1

定位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/

Answer 2

您可以更改标记：

<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());

Answer 3

试试这个：

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

Answer 4

使用容器

<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())

Answer 5

在不更改标记的情况下 - 使用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 + '">')
}

如何使用Jquery在锚标记中附加输入？

5 个答案: