JQuery: Как текст замены ПОСЛЕ вложенного тега?
Я пытаюсь выяснить положение jQuery для переименования "яблока" с "оранжевым":
<a id="alvin" href="http://www.camille.com"><ins class="xxx">Anna</ins>apple</a>
Это может быть сделано легко?
4 ответа
Я удалил # из идентификатора, поскольку это недопустимый идентификационный символ.
Учитывая это, попробуйте следующее:
Живой пример: http://jsfiddle.net/u49wy/
var $contents = $('#alvin').contents();
$contents[$contents.length - 1].nodeValue = 'orange';
.contents () возвращает все дочерние узлы элемента, включая текстовые узлы. .
Затем код захватывает последний узел элемента (который является текстовым узлом) и обновляет его nodeValue , таким образом вы обновляете значение текстового узла.
.contents ()- http://api.jquery.com/contents
Патрик меня опередил, но мое решение немного более динамично в том смысле, что оно будет выделять текст где угодно, даже если с обеих сторон есть теги:
$('#alvin').contents().filter(function () {
return this.nodeType == 3;
})[0].nodeValue = "orange";
Это делается путем фильтрации содержимое так, чтобы остались только текстовые узлы, и изменяет первое nodeValue на «оранжевый».
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 означает после :
var elem = $('#alvin ins+span');
elem.text(elem.text().replace('apple', 'orange'));
Другой способ (правда, не очень красивый):
$("#alvin").html($("#alvin").html().replace(/apple$/,'orange'));
Edit: Добавил $ в конце apple. Спасибо Патрик.