javascript - 替换嵌套 div 中的文本

Question

我有 jQuery，它计算页面上有多少个部分以及哪个块是哪个。

以下示例演示了这一点：

$(function() {
	var totalQuestionAmount = $(".question").length;
    $(".question-total__integer").text(totalQuestionAmount);
    $(".question-number").each(function(index) {
       console.log(index + 1);
       $(this).append(index + 1);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>

但是，您可以看到结果是倒退的。它应该是“1 of 4”、“2 of 4”等等。

我尝试了一些不同的东西：

.text()

$(function() {
	var totalQuestionAmount = $(".question").length;
    $(".question-total__integer").text(totalQuestionAmount);
    $(".question-number").each(function(index) {
       console.log(index + 1);
       $(this).text(index + 1);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>

但它不起作用，因为它会覆盖所有内容

.html()

$(function() {
	var totalQuestionAmount = $(".question").length;
    $(".question-total__integer").text(totalQuestionAmount);
    $(".question-number").each(function(index) {
       console.log(index + 1);
       $(this).html(index + 1);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total">of <span class="question-total__integer"></span></span></div>
</div>

结果相同。

为什么顺序倒了？如何在总计的标记上方插入值，使其显示为“x of y”？

标签： javascriptjqueryhtml

Answer 1

您的 HTML 正在这样做。修复：立即关闭第一个span，在“of”这个词之前，而不是在另一个之后span，然后span在你的代码中定位第一个和第二个：

$(function() {
	var totalQuestionAmount = $(".question").length;
    $(".question-total__integer").text(totalQuestionAmount);
    $(".question-total").each(function(index) {
       console.log(index + 1);
       $(this).append(index + 1);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question">
  <div class="question-number"><span class="question-total"></span> of <span class="question-total__integer"></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total"></span> of <span class="question-total__integer"></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total"></span> of <span class="question-total__integer"></span></div>
</div>
<div class="question">
  <div class="question-number"><span class="question-total"></span> of <span class="question-total__integer"></span></div>
</div>