使用jQuery追加文本

Question

我有一个有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>

Answer 1

由于我们无法确定您的代码在您的应用中工作的原因，但在其他演示中工作，这是一种使用text(function)的方法，该方法在内部循环所有气泡类而无需需要任何id并且只需依靠索引来设置步骤编号

＆＃13;

＆＃13;

$('.progress-indicator .bubble').text(i => 'Step ' + (i + 1))

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用append()时，必须将DOM元素传递给节点。因此，请尝试设置text()，而不是：

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

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

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

Answer 3

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

还应该注意，text（）和html（）将替换标签内部的所有内容。 所以你可能想要$(‘#id’).html($(‘#id’).html() + ‘hello’)

追加在一个元素之后添加它不会添加到其中的现有内容。

Answer 4

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

我会避免使用append（）来处理你在这里尝试做的事情，它的工作方式可能是违反直觉的。

我认为当你附加到列表项时你的代码看起来没问题，但你实际上是把文本放在项目后面（在无人区域，不应该在那里），浏览器恰好发生在将它们渲染到你想要的地方

Answer 5

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

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