javascript - 更改跨度的文本，不影响孩子

Question

如果我有以下标记，如何只更改父范围内的文本 - 使用 javascript 或 jQuery？

<td class="cartItemTotal">
    <span>
        <span class="currency_sign">£</span>
        25.00
    </span>
</td>

我尝试了以下两个（基于两个 不同的SO 问题），但都没有任何反应。

(1)

$this.find('.cartItemTotal > span').contents().filter(function(){
    return this.nodeType == 3;
}).filter(':first').replaceWith( itemTotal.toFixed(2) );

(2)

$this.find('.cartItemTotal > span')[0].firstChild.data = itemTotal.toFixed(2);

注意：“ $this”是指当前<tr>表格数据元素所在的位置。

Answer 1

jQuery 对 textNodes 的处理并不好，但是使用原生的nextSibling你可以在.currency_sign元素之后得到 textNode：

$('.currency_sign').get(0).nextSibling.nodeValue = 'new value';

小提琴

我get(0)用来获取集合中的第一个本机 DOM 元素。

Answer 2

与您的标记相比，您的选择器没有意义，但是如果您可以访问.total > span，则可以获取 DOM 元素[0]，然后使用.lastChild.

$(".total > span").each(function(i, el) {
    console.log(el.lastChild.data);
});

演示：http: //jsfiddle.net/Y3m4b/

---

所以你的最后一个代码示例几乎就在那里。只需要使用.lastChild而不是.firstChild.

$this.find('.cartItemTotal > span')[0].lastChild.data = itemTotal.toFixed(2);

Answer 3

您可以使用 contents() 和 filter() 来获取 textNodes。

var node = $(".cartItemTotal>span").contents().filter(function() {
        return this.nodeType == 3;
    });
node.last().replaceWith( document.createTextNode( "1.99" ));

运行小提琴：http: //jsfiddle.net/eSemE/