JQuery: ¿Cómo reemplazar el texto DESPUÉS de una etiqueta anidada?

Question

que estoy tratando de averiguar el estado de jQuery para cambiar el nombre de "manzana" con "naranja:"

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

se puede hacer esto fácilmente?

Answer 1

Eliminé el # de la ID, ya que no es un ID válido.

Dado que, intente esto:

Ejemplo vivo:http://jsfiddle.net/u49wy/

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

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

.contents() devuelve todos los nodos secundarios del elemento, incluyendo los nodos de texto.

El código entonces agarra el último elemento de nodo (que es un nodo de texto) y actualiza su nodeValue, que es la forma de actualizar el valor de un nodo de texto.

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

Answer 2

Patrick me adelantó, pero mi solución es un poco más dinámica en la que sería seleccionar el texto en cualquier lugar, incluso si había etiquetas a cada lado:

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

Lo hace filtrando el contenido para que solo queden nodos de texto y cambie el primer nodeValue a "naranja".

http://jsfiddle.net/ssRyB/

Answer 3

id="#alvin" no es una sintaxis válida, '#' se utiliza como parte de un selector de jQuery o en el CSS.

Para este ejemplo muy limitado, reemplace "apple" por "orange". De hecho, simplemente leería innerHTML y lo reescribiría. Ni siquiera estoy usando jQuery para esto.

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

que se utiliza sin jQuery jQuery porque no tiene una forma limpia para seleccionar los nodos de texto callejeros. Entonces, ¿qué pasa si envolvemos los nodos de texto secundarios en tramos? Podríamos hacer esto:

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

De esa manera, nos quedamos con la estructura:

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

entonces podemos utilizar el selector adyacente + para llegar a ella, como esto - ins+span significa una <span> después de una <ins>:

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

Answer 4

Otra forma (no muy bonita, aunque):

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

Editar: Agregó $ al final de apple. Gracias Patrick.