javascript - html变化的CSS子元素选择

Question

我有两个 html 部分:

<div id="signin">
  <div class="dialog">
    <div class="content">
      <div class="header">
        <h4>Title</h4>
      </div>
    </div>
  </div>
</div>

<div id="phone">
  <div class="dialog">
    <div class="content">
      <div class="header">
        <h4>Title</h4>
      </div>
    </div>
  </div>
</div>

我尝试用这个改变 h4 元素的 html:

$("#signin > .dialog > .content > .header > h4").html("Sign In");

或

$("#signin > h4").html("Sign In");

但它没有用，知道吗？

Answer 1

从您的选择器中删除 > 并将您的代码包装在 $(function() { ... }); 即代码应该在内容完全加载并准备就绪时执行被操纵:

$(function() {
  $("#signin h4").html("Sign In");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="signin">
  <div class="dialog">
    <div class="content">
      <div class="header">
        <h4>Title</h4>
      </div>
    </div>
  </div>
</div>

<div id="phone">
  <div class="dialog">
    <div class="content">
      <div class="header">
        <h4>Title</h4>
      </div>
    </div>
  </div>
</div>