如何使用jQuery设置文本节点值

Question

我有这样的 HTML 结构：

<div class="votes">
    <b>5</b> Votes
    <a id="vote-' + element_id +'" href="#" class="vote-btn"></a>
</div>

我已经设法在 5 次投票后使用以下方法获得文本：

var voteTextNode = $(this).parent('div').contents().filter(function() {
                    return this.nodeType == 3;  
                });
var voteText = voteTextNode.text();

现在我想更改此文本以投票，即各自的票数。 我试过这个：

voteNewText = ( newCount == '1' ) ? 'Vote' : 'Votes';
voteTextNode.text(voteNewText);

但这对我不起作用。 我还尝试了此链接中的代码： 如何使用 jQuery 获取、操作和替换文本节点？ 但它也不适合我告诉我我哪里做错了

Answer 1

如您所见，jQuery 并不是真正用于处理文本节点。 你的var voteTextNode将是一个 jQuery 实例，持有一组文本节点。 您几乎无法使用.text()操作它们，这会向其中添加一些新的 TextNode。

然而，这应该有效：

 $(this).parent('div').contents().each(function() {
     // iterate over all child nodes
     if (this.nodeType == 3)
        this.data = "Vote";
 });

但是使用普通的 dom 方法可能会更清楚：

 var countTextNode, voteTextNode;
 $(this).parent('div').find('b').each(function() {
      countTextNode = this.firstChild;
      voteTextNode = this.nextSibling;
 });
 return function setVotes(num) {
      countTextNode.data = num;
      votTextNode.data = num == 1 ? 'Vote' : 'Votes';
 };

Answer 2

把它放在一个跨度内

<div class="votes">
    <b>5</b> <span id="votesTxt">Votes</span>
    <a id="vote-' + element_id +'" href="#" class="vote-btn"></a>
</div>

进而

$("#votesTxt").text(( newCount == '1' ) ? 'Vote' : 'Votes');

编辑如果您不想使用跨度，则只需更改 b 标签后元素的文本：

$("#votes b:first")[0].nextSibling.data = (( newCount == '1' ) ? 'Vote' : 'Votes');

Answer 3

将其视为 DOM 树：您可能想要的是获取每个<div>的第一个<b>元素，类为“votes”，然后更改紧随其后的文本节点中的文本。 jQuery 擅长选择和迭代元素，因此如果您愿意，可以在这部分使用它。 获得<b>元素后，切换到常规 DOM。 下面是一个例子：

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

代码：

$("div.votes").find("b:first").each(function() {
    this.nextSibling.data = ($(this).text() == "1") ? " Vote" : " Votes";
});

Answer 4

您可以更改初始标记吗？ 如果您只需将要更改的文本包装在标签中，您将更轻松地执行此操作：

<span id="votetext">Vote</span>

然后您可以轻松设置文本：

$('#votetext').text('Votes');