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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

使用.find()

描述：获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

Answer 2

从选择器中删除True并将代码包装在>中，即当内容完全加载并准备好操作时代码应该执行：

＆＃13;

$(function() { ... });

＆＃13;

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

＆＃13;

Answer 3

在此脚本中使用$("#signin > .dialog > .content > .header > h4").html("Sign In"); >表示第一个子元素，但在您的html h4中是#signin的第4个子元素，因此您需要像这样使用< / p>

$("#signin h4")

或使用.find()方法

$("#signin").find('h4');

html的CSS子元素选择更改

3 个答案: