使用 jQuery 将文本附加到 span答案

【问题标题】：Appending text to span with jQuery使用 jQuery 将文本附加到 span
【发布时间】：2018-05-27 05:31:58
【问题描述】：

我有一个包含 4 个步骤的进度条。请参阅下面的 HTML

<ul class="progress-indicator">
<li class="completed"> <span id="signupformstep1" class="bubble"></span></li>
<li class="completed"> <span id="signupformstep2" class="bubble"></span></li>
<li><span id="signupformstep3" class="bubble"></span></li>
<li><span id="signupformstep4" class="bubble"></span></li>
</ul>

我正在尝试使用 jQuery 附加一些文本，但它并没有做我想要做的事情。

这可行，但将相同的文本附加到所有 li 元素：

  $("li").append('hiya');

如果我尝试选择带有 id 的列表来附加文本，它不会显示。

  $("#signupformstep1").append('hello'); // does not work

编辑我用所有这些标记进行了测试，它们都可以工作，尽管跨度显示不正确，但它会附加：

$("span").html("hello");
$("span").text("hello");
$("span").append("hello");

跨度输出

$("li").html("hello");
$("li").text("hello");
$("li").append("hello");

li 输出（期望的输出）

但是，当我使用主题标签时，无论是在 li 还是 span 上使用它，它都会失败。以下代码均未在我的应用程序中运行：

$("#signupformstep1").html("hello");
$("#signupformstep1").text("hello");
$("#signupformstep1").append("hello");

期望的输出是：

<ul class="progress-indicator">
<li class="completed"> <span id="signupformstep1" class="bubble">Step 1</span></li>
<li class="completed"> <span id="signupformstep2" class="bubble">Step 2</span></li>
<li><span id="signupformstep3" class="bubble">Step 3</span></li>
<li><span id="signupformstep4" class="bubble">Step 4</span></li>
</ul>

【问题讨论】：

在这里工作正常：jsfiddle.net/barmar/qmwd72zb
你没有附加到跨度，你附加到li。
@Barmar：是的，它在小提琴中有效，但在我的应用程序中无效。我会编辑这个问题，你是对的。
如果没有失败的minimal reproducible example，很难提供帮助
@Brian 您的问题现在似乎格式错误。 class 属性现在是 span 中 id 属性的一部分，
元素中只有一个 "。

【解决方案1】：

由于我们无法确定为什么您的代码不能在您的应用程序中运行但在其他演示中运行，这里有一种使用 text(function) 的方法，它在内部循环所有气泡类而不需要任何 id 并且仅依赖于索引设置步数

$('.progress-indicator .bubble').text(i =&gt; 'Step ' + (i + 1))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="progress-indicator">
  <li class="completed"> <span id="signupformstep1" class="bubble"></span></li>
  <li class="completed"> <span id="signupformstep2" class="bubble"></span></li>
  <li><span id="signupformstep3" class="bubble"></span></li>
  <li><span id="signupformstep4" class="bubble"></span></li>
</ul>

【讨论】：

你能用li发这样的帖子吗？
不确定你的意思，因为这匹配 "The desired output would be"
这是您的答案pasteboard.co/Hn19EDP.png的视觉输出
很好，但取决于您确定文本需要在哪里与您的 css 一起使用。您提供了示例输出，除非已更新，否则很难知道将其放在哪里。为文本添加另一个具有不同公共类的跨度将使修改变得非常简单。请注意，我们看不到您的 CSS
我听到了。我已经编辑了我的问题，以向您展示用户视图以及每个代码显示的内容。

【解决方案2】：

当使用append() 时，您必须向它传递一个 DOM 元素以附加到节点。因此，请尝试设置 text()，如下所示：

$("#signupformstep1 .bubble").text("hello");

或者，如果您尝试在 <li> 内的 span 之前或之后设置文本，您可以在其之前或之后专门添加它：

$("signupformstep1 .bubble").before("hello");
$("signupformstep1 .bubble").after("hello");

【讨论】：

虽然文档没有这么说，append 会接受 HTML 文本。
第一个将消除气泡跨度
@charlietfl 是的。修改了答案。

【解决方案3】：

您的 ID 选择器 jQuery 和 HTML 看起来应该可以工作，那么您的 ID 可能不是全部小写吗？或者 ID 有其他一些不寻常的东西，就像它们是由稍后运行的另一个脚本添加的一样。

还应该注意的是 text() 和 html() 将替换标签中已经存在的所有内容。所以你可能想要$(‘#id’).html($(‘#id’).html() + ‘hello’)

Append 在它不添加到其中现有内容的元素之后添加内容。

【讨论】：

【解决方案4】：

当您说$("#signupformstep1").append('hello'); 不起作用时，您是否在执行此操作时将 ID 移动到 <li>？

对于您在此处尝试执行的操作，我会避开 append()，它的工作方式可能违反直觉。

我认为当您附加到列表项时，您的代码看起来还不错，但实际上您是在项目之后放置文本（在无人区，它们不应该在的地方），而浏览器恰好在你想要的地方渲染它们

【讨论】：

【解决方案5】：

您可以尝试使用子选择器。如果您知道要针对哪个 li，请执行以下操作：

$("#signupformstep1 > .bubble").text("hello");

【讨论】：

val 用于输入。