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

但它对我不起作用。我也试过这个链接的代码： How can I get, manipulate and replace a text node using 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');

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

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

Answer 3

将它视为DOM树：你可能想要的是在每个<b>中使用类“votes”获取第一个<div>元素，然后立即更改文本节点中的文本跟着它。 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');

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

4 个答案: