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

Question

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

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

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

Answer 1

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

Учитывая это, попробуйте это:

Live Пример: http://jsfiddle.net/u49wy/

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

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

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

Затем код захватывает последний узел element (который является текстовым узлом) и обновляет его 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'));

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