JQuery: come sostituire il testo DOPO un tag nidificato?

Question

Sto cercando di capire la dichiarazione di jQuery per rinominare "mela" con "orange:"

<a id="alvin" href="http://www.camille.com"><ins class="xxx">Anna</ins>apple</a> 

si può fare facilmente?

Answer 1

Ho rimosso il # dall'ID, poiché non è un carattere ID valido.

Dato che, provate questo:

Esempio dal vivo:http://jsfiddle.net/u49wy/

var $contents = $('#alvin').contents(); 

$contents[$contents.length - 1].nodeValue = 'orange'; 

.contents() restituisce tutti i nodi figlio dell'elemento, compresi i nodi di testo.

Il codice afferra poi l'ultimo elemento nodo (che è un nodo di testo) e aggiorna la sua nodeValue, che è come si aggiorna il valore di un nodo di testo.

• .contents() - http://api.jquery.com/contents

Answer 2

Patrick mi ha battuto ad esso, ma la mia soluzione è un po 'più dinamico che avrebbe selezionare il testo da nessuna parte, anche se ci fossero modifiche su entrambi i lati:

$('#alvin').contents().filter(function() { 
    return this.nodeType == 3; 
})[0].nodeValue = "orange"; 

Fa questo filtrando il contenuto in modo che rimangano solo i nodi di testo e cambia il primo nodeValue in "arancione".

http://jsfiddle.net/ssRyB/

Answer 3

id="#alvin" non è sintassi valida, '#' viene usato come parte di un selettore per jQuery o in CSS.

Per questo esempio molto limitato, sostituire "mela" con "arancione" in realtà semplicemente leggendo il innerHTML e riscrivendolo. Non sto nemmeno usando jQuery per questo.

window.onload = function() { 
    var alvin = document.getElementById('alvin') 
    alvin.innerHTML = alvin.innerHTML.replace('apple', 'orange'); 
} 

Ho usato senza jQuery perché jQuery non ha un modo pulito per selezionare i nodi di testo randagi. Quindi, cosa succede se abbiamo avvolto qualsiasi nodo di testo figlio in span? Si potrebbe fare questo:

$('#alvin').contents().filter(function() { 
    return this.nodeType == 3; 
}).wrap('<span></span>').end(); 

In questo modo, ci ritroviamo con la struttura:

<a id="alvin" href="http://www.camille.com"><ins class="xxx">Anna</ins><span>apple</span></a> 

Poi possiamo usare il selettore di + adiacente per arrivare a lui, come questo - ins+span significa un <span> dopo un <ins>:

var elem = $('#alvin ins+span'); 
elem.text(elem.text().replace('apple', 'orange')); 

Answer 4

un altro modo (non molto bello però):

$("#alvin").html($("#alvin").html().replace(/apple$/,'orange')); 

Modifica: Aggiunto il $ alla fine della mela. Grazie Patrick.