用jQuery追加文本以跨越

Question

我有一个进度条，有四个步骤。见下面的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没有显示正确，但它附加了：

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

Span输出

​

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

li输出(期望输出)

​

但是，无论我在li还是span上使用hashtag，它都会失败。下面的代码没有一个在我的应用程序中运行：

$("#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的情况下在所有冒泡类上进行内部循环，只需要索引来设置步骤号

​

$('.progress-indicator .bubble').text(i => '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>

​

Answer 2

在使用append()时，必须传递一个DOM元素来附加到节点。因此，尝试按以下方式设置text()：

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

或者，如果您试图在<li>内的span之前或之后设置文本，则可以在它之前或之后具体添加文本：

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

Answer 3

您的ID选择器jQuery和HTML看起来应该可以工作，那么您的ID不都是小写的吗？或者，is还有一些异常的地方，就像后来运行的另一个脚本所添加的那样。

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

在没有添加到元素中的现有内容的元素之后添加内容。