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

【问题标题】：How to set the text node value using jQuery如何使用 jQuery 设置文本节点值
【发布时间】：2021-07-22 14:27:18
【问题描述】：

我有一个这样的 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? 但它也对我不起作用告诉我我做错了什么

【问题讨论】：

如果出于某种原因您不能在中包含投票？由 DOM 操作比使用纯文本更快、更容易。
实际上 span 定义的样式与该区域的设计不匹配。我知道我可以改变那个特定跨度的风格，但只是想知道是否有另一种方法可以做到这一点......

标签： javascript jquery html string

【解决方案1】：

把它放在一个跨度中

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

【讨论】：

这里你默认删除了文本投票，但我需要它，因为帖子已经有一些投票。当当前用户点击投票按钮时，我需要更改它。

【解决方案2】：

您可以更改初始标记吗？如果您只需将要更改的文本包装在标签中，您将更容易做到这一点：

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

然后就可以轻松设置文字了：

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

【讨论】：

【解决方案3】：

如您所见，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';
 };

【讨论】：

【解决方案4】：

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

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

代码：

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

【讨论】：