在范围内设置文本答案

【问题标题】：Set the text in a span在范围内设置文本
【发布时间】：2012-11-21 12:11:32
【问题描述】：

我有这个跨度

<a title="Prev" data-event="click" 
   data-handler="prev" class="ui-datepicker-prev   ui-corner-all">
     <span class="ui-icon ui-icon-circle-triangle-w">Prev</span>
</a>

我需要将 span 的文本设置为 << 而不是其当前文本 Prev。

我在下面尝试了这个，但它并没有像我预期的那样改变文本。如何做到这一点？

 $(".ui-icon .ui-icon-circle-triangle-w").html('<<');

【问题讨论】：

我猜它不会起作用，因为你需要为“«”传递 ASCII 码。试试吧，我认为它会工作。
how to set a value for a span using JQuery的可能重复

标签： jquery

【解决方案1】：

改用.text()，并更改您的选择器：

$(".ui-datepicker-prev .ui-icon.ui-icon-circle-triangle-w").text('<<');

-- VIEW DEMO --

【讨论】：

【解决方案2】：

这是因为你有错误的选择器。根据您的标记，.ui-icon 和 .ui-icon-circle-triangle-w" 应该指向同一个 <span> 元素。所以你应该使用：

$(".ui-icon.ui-icon-circle-triangle-w").html("<<");

或

$(".ui-datepicker-prev .ui-icon").html("<<");

或

$(".ui-datepicker-prev span").html("<<");

【讨论】：

hmmm.. 不要认为这会起作用，因为它会尝试将 << 解释为 html，不是吗？
@musefan 不会。它会起作用。 text() 方法中不需要。
@VisioN 这只是因为在这种情况下它不会解析为 HTML。我认为如果我们正在处理文本内容，应该使用text。如果用户想要显示 <prev> 怎么办，那么这将被解释为 HTML
@Curt <prev> 有一个结束 > 括号，因此浏览器会从中制作一个标签。否则，<< 或 >> 将被正确解释。
@VisioN 为什么是html() 而不是text()？我没有看到好处，只有潜在的缺陷。 OP 稍后将内容更改为<prev>，现在他们必须更改用于输出字符串的方法。为什么一开始就没有使用正确的方法。

【解决方案3】：

您需要修复您的选择器。虽然 CSS 语法要求多个类以空格分隔，但选择器语法要求它们直接连接，并以点为前缀：

$(".ui-icon.ui-icon-circle-triangle-w").text(...);

或更好：

$(".ui-datepicker-prev > span").text(...);

【讨论】：

【解决方案4】：

$('.ui-icon-circle-triangle-w').text('<<');

【讨论】：

【解决方案5】：

为您的 span 提供一个 ID，然后更改目标 span 的文本。

$("#StatusTitle").text("Info");
$("#StatusTitleIcon").removeClass("fa-exclamation").addClass("fa-info-circle"); 

<i id="StatusTitleIcon" class="fa fa-exclamation fa-fw"></i>
<span id="StatusTitle">Error</span>

这里的“错误”文本将变为“信息”，并且它们的字体图标也将被更改。

【讨论】：

【解决方案6】：

试试吧。。它将首先查找包含类“ui-icon-circle-triangle-w”的跨度的锚标记，然后将跨度的文本设置为“

$('a span.ui-icon-circle-triangle-w').text('<<');

【讨论】：

添加一些解释，说明此答案如何帮助 OP 解决当前问题
是的，当然....它会首先查找包含类“ui-icon-circle-triangle-w”的span的锚标记，然后将span的文本设置为“
是的，请在答案中编辑此内容，这会使您的答案更有帮助，因为仅发布代码 sn-p 不是回答任何问题的正确方法。谢谢