JQuery: Как заменить текст ПОСЛЕ Вложенного тега?

Question

Я пытаюсь выяснить о JQuery переименовывать «яблоко» с «оранжевым:»

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

Можно ли это сделать легко?

Answer 1

Я удалил # из ID, так как он не является допустимым символом идентификатора.

Учитывая, что, попробуйте следующее:

Живой пример:http://jsfiddle.net/u49wy/

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

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

.contents() возвращает все дочерние узлы элемента, в том числе текстовые узлы.

Код затем захватывает последний элемент (который является текстовым узлом) и обновляет его nodeValue, то есть как вы обновляете значение текстового узла.

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

Answer 2

патрик опередил меня, но мое решение немного более динамичным в том, что он будет выбрать текст в любом месте, даже если были метки с обеих сторон:

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

Он делает это путем фильтрации содержимого, так что остаются только текстовые узлы, а первый nodeValue изменяет на «оранжевый».

http://jsfiddle.net/ssRyB/

Answer 3

id="#alvin" не действует синтаксис, '#' используется как часть селектора для JQuery или в CSS.

Для этого очень ограниченного примера замените «яблоко» на «оранжевый», я бы просто прочитал innerHTML и переписал его. Я даже не использую jQuery для этого.

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

Я не использовал jQuery, потому что у jQuery нет чистого способа выбора шальных текстовых узлов. Итак, что, если мы обернули любые дочерние текстовые узлы в промежутках? Мы могли бы сделать это:

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

Таким образом, мы остались со структурой:

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

Тогда мы можем использовать прилегающую селектор +, чтобы получить на него, как это - ins+span означает <span> после <ins>:

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

Answer 4

Другой способ (не очень красиво, хотя):

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

Редактировать: Добавлено $ в конце яблока. Спасибо, Патрик.