3

所以我有表格单元格，例如：

<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。您需要检查控制台以正确测试它。

4

2 回答 2

2

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

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

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

于 2013-03-01T23:53:58.293 回答
2

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

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

和：

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

JS小提琴。

或者，如果您想坚持使用“more-jQuery”方法，您可以使用：

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

JS小提琴。

虽然 jQuery 无法轻松处理设置 a 的值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小提琴。

顺便说一句，鉴于以下情况：

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 建议在不必要地重新包装 jQuery 对象时对性能造成轻微（但绝对不必要）的影响。

参考：

于 2013-03-02T16:13:28.457 回答