Question

我从HTML5 / JavaScript / jQuery堆栈开始，很快就遇到了问题。我想通过jQuery更新<div>的内容。

以下所有代码均为JSFiddle。

HTML部分：

<body>
  <div class="root">
    <div class="current">
      <div class="date1"></div>
    </div>
    <div class="date2"></div>
    <div class="calendar"></div>
    <div class="status"></div>
  </div>
  <script src="infoscreen.js"></script>
</body>

infoscreen.js的内容：

$(document).ready(function(){
        console.log("ready!");
        update();
    });

function update() {
    $(".current").text("current");
    $(".date1").text("date1");
    $(".date2").text("date2");
    $(".calendar").text("calendar");
    $(".status").text("status");
}

问题在于<div class="date1">和<div class="date2">。第一个不通过jQuery查询更新，而第二个是。

是否有一种特殊方法可以解决嵌套<div>问题？我不这么认为，因为他们都是<div class="root">的孩子（我不需要参考班级root）

Answer 1

这是因为$(".current").text("current");会覆盖<div>的完整内容，因此<div>与date1类不再存在。只需右键单击浏览器中的元素，然后选择“inspect element”即可查看。

Answer 2

问题是“$（”。current“）。text（”current“）;”使用文本“current”将class的“current”设置为div的内容，因此此元素之前的div正在消失。您可以通过查看浏览器中呈现的代码来查看它。

Answer 3

我在这里没有看到任何问题。我认为唯一的问题是你没有在这里添加jquery脚本，请在infoscreen.js之前添加它。 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="infoscreen.js"></script>

为什么有些<div>没有更新？

3 个答案: