替换嵌套div中的文本

时间：2018-12-13 17:15:14

标签： javascript jquery html

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

3 个答案:

答案 0 :(得分：0)

您的HTML正在这样做。修复：立即关闭单词“ of”之前的第一个span，而不是另一个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>
    public ByteArrayResource readFile() throws IOException {
        byte[] content = null;

        try (S3Object object = amazonS3.getObject(new GetObjectRequest(bucketName, key))) {
            content = IOUtils.toByteArray(object.getObjectContent());
            return new ByteArrayResource(content);

        } catch (IOException e) {
            LOG.error("IOException caught while reading file", e);
        } 
        return new ByteArrayResource(content);
    }

答案 1 :(得分：0)

您必须通过关闭第一个跨度来稍微重构HTML。

然后按类别定位跨度以设置文本：

$(function() {
  var totalQuestionAmount = $(".question").length;
  $(".question-total__integer").text(totalQuestionAmount);
  $(".question-number").each(function(index) {
    console.log(index + 1);
    $(this).find('.question-total').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"></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>

答案 2 :(得分：0)

只需使用.prepend()代替.append() 

var totalQuestionAmount = $(".question").length;
$(".question-total__integer").text(totalQuestionAmount);
$(".question-number").each(function(index) {
  console.log(index + 1);
  $(this).prepend(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>

相关问题
最新问题