Question

所以我有表格单元格如下：

<td class="right footerCell">
    $51,888,734.24
    <div class="fht-cell" style="width: 128px;"></div>
</td>

我知道文本可以在div中，但是这个标记部分是由插件生成的。有时，我想更新单元格内部的数量而不影响div（插件用于使单元格具有特定宽度）。我现在能够匹配需要更新的文本元素，我甚至可以读取正确的值，但是当我尝试更改它时，它根本就没有。我正在使用这样的东西：

//selects one of the cells above at a specific column
var totalCell = $("div.fht-fixed-body div.fht-tfoot table.fht-table tr > td.right.footerCell:nth-child(" + childNumber + ")");

//prints out $51,888,734.24
console.log($(totalCell).contents().eq(0).text());

$(totalCell).contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

//prints out $51,888,734.24 again
console.log($(totalCell).contents().eq(0).text());

这可能是非常愚蠢的事情，但我无法看到它。感谢任何帮助。谢谢。

修改这是相应的JS Fiddle。您需要检查控制台以正确测试它。

Answer 1

jQuery似乎不喜欢更改文本节点。希望其他人可以解释原因，但最简单的方法是创建一个新的文本节点，插入它，然后删除旧的：

$(totalCell).contents().eq(0).before('Changed Forever').remove();

当然，这更像是一种解决方法，而不是解决方案，但应该满足您的需求，并且它会生成相同的DOM结构（即不会将其包含在span标签或类似内容中）

Answer 2

解决这个问题并不是很复杂，只需要替换jQuery方法：

$(totalCell).contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

使用：

totalCell[0].childNodes[0].nodeValue = 'value has been changed forever';

JS Fiddle

或者，如果你想坚持使用'more-jQuery'方法，你可以使用：

totalCell.contents().eq(0).text(function(){
    return this.nodeValue = "VALUE HAS BEEN CHANGED FOREVER!";
});

JS Fiddle

虽然jQuery没有让 easy 处理设置textNode的值，但是可以简单地使用本机JavaScript来实现因此，在上述两种方法中都使用了nodeValue。而不是使用复杂的选择器，为什么不简单：

/* if you don't need to retain the jQuery methods of the selected node,
   I'd suggest using:
   $(".fht-cell").eq(0).get(0);
   omitted in this demo because I didn't know if you needed the jQuery methods */
var totalCell = $(".fht-cell").eq(0);

/* the `.get(0)` 'drops' the jQuery-wrapped node to a plain DOM node,
   allowing us to use native JavaScript traversal methods */
console.log("Before: " + totalCell.get(0).previousSibling.nodeValue);

// updating the nodeValue of the textNode:
totalCell.get(0).previousSibling.nodeValue = 'Value has been changed forever!';

console.log("After: " + totalCell.get(0).previousSibling.nodeValue);

JS Fiddle

顺便提一下，给出以下内容：

var totalCell = $("td.right.footerCell").eq(0);

totalCell 已经一个jQuery对象，你不需要用jQuery重新包装它，因此：

$(totalCell).contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

与完全相同：

totalCell.contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

但后者更有效/更简洁，JS Perf建议a slight (but absolutely unnecessary) performance-hit不必要地重新包装jQuery对象。

参考文献：

get()。

Node.nodeValue。

jQuery：可以读取松散的文本但不能正确更新它

2 个答案: