2

我有一个这样的 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 获取、操作和替换文本节点？ 但它也对我不起作用告诉我我做错了什么

4

4 回答 4

5

如您所见，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';
 };
于 2012-05-17T11:38:56.353 回答
4

把它放在一个跨度

<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');


编辑如果您不想使用 span 则只需更改 b 标记后元素的文本：

$("#votes b:first")[0].nextSibling.data = (( newCount == '1' ) ? 'Vote' : 'Votes');
于 2012-05-17T11:23:51.867 回答
2

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

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

代码：

$("div.votes").find("b:first").each(function() {
    this.nextSibling.data = ($(this).text() == "1") ? " Vote" : " Votes";
});
于 2012-05-17T12:13:51.273 回答
0

你能改变最初的标记吗？如果您只是将要更改的文本包装在标签中，您将更轻松地执行此操作：

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

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

$('#votetext').text('Votes');
于 2012-05-17T11:24:09.373 回答