Question

我正在试图找出用“orange：”重命名“apple”的jQuery语句

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

这可以轻松完成吗？

Answer 1

我从ID中删除了#，因为它不是有效的ID字符。

鉴于此，试试这个：

直播示例： http://jsfiddle.net/u49wy/

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

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

.contents()返回元素的所有子节点，包括文本节点。

然后代码抓取最后的元素节点（这是一个文本节点）并更新其nodeValue，这是更新文本节点值的方法。

Answer 2

帕特里克打败了我，但我的解决方案有点动态，它会在任何地方选择文字，即使两边都有标签：

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

它通过过滤内容以便只保留文本节点，并将第一个nodeValue更改为“橙色”来完成此操作。

Answer 3

id="#alvin"是无效语法，'＃'用作jQuery选择器或CSS中的一部分。

对于这个非常有限的例子，将“apple”替换为“orange”我实际上只是阅读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'));

修改：在Apple结束时添加了$。谢谢Patrick。