Comment ajouter une entrée dans une balise d'ancrage à l'aide de Jquery ?

Question

J'ai une balise d'ancrage avec un span à l'intérieur. En utilisant Jquery, comment puis-je ajouter une entrée sans perdre le span et en utilisant la valeur réelle ?

J'ai obtenu ceci

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

Je veux utiliser la valeur de Juan David comme valeur d'une entrée.

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

la span class='blue' n'est pas la même dans certains cas, je veux dire qu'elle change

J'ai essayé

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

Résultat

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

C'est presque fini, j'ai besoin d'aide ! !!

Answer 1

Cibler les textNodes est un peu difficile, mais voici une approche :

$(".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>​

Ce qui donne le résultat suivant :

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

Démonstration : http://jsfiddle.net/TxvYE/

Answer 2

Vous pouvez modifier le balisage :

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

Et js :

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

Answer 3

Essayez ça :

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

Answer 4

Utiliser un conteneur

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

Et puis il est facile à remplacer :

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

Answer 5

Sans modifier votre balisage - et en utilisant un regex javascript, vous pouvez utiliser ceci :

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 + '">')
}