Javascript '；h1:n个孩子（5）和#x27；选择第三个而不是第五个孩子_Javascript_Html_Jquery_Css_Css Selectors

Javascript '；h1:n个孩子（5）和#x27；选择第三个而不是第五个孩子

javascript html jquery css

Javascript '；h1:n个孩子（5）和#x27；选择第三个而不是第五个孩子,javascript,html,jquery,css,css-selectors,Javascript,Html,Jquery,Css,Css Selectors,据我所知，这些都是index.html中的H1标记 <h1 class='header'>Hello, world (1)</h1> <h1 class='header'>Hello, world (2)</h1> <h1 class='header'>Hello, world (3)</h1> <h1 class='header'>Hello, world (4)</h1> <h1 class

据我所知，这些都是index.html中的H1标记

<h1 class='header'>Hello, world (1)</h1>
<h1 class='header'>Hello, world (2)</h1>
<h1 class='header'>Hello, world (3)</h1>
<h1 class='header'>Hello, world (4)</h1>
<h1 class='header'>Hello, world (5)</h1>
<h1 class='header'>Hello, world (6)</h1>

<h1 class='header' id='header-3'>Hello, world (Header 3)(1)</h1>
<h1 class='header' id='header-3'>Hello, world (Header 3)(2)</h1>

当我写这个

$（'h1:nth child（5）'）.text（“Ironman”）

时，我希望它能调整第5个h1元素。然而它实际上调整了第四个

当我写这个

$（'h1:nth child（4）'）.text（“Thanos”）

时，我希望它能调整第4个元素。然而它实际上调整了第三个

根据w3schools（），第一个元素的索引号为1

有人能澄清一下发生了什么事吗

更新

这是我所有的代码（为它粘贴到StackOverflow中的混乱方式道歉）


/*身体{
背景色：红色；
}*/
h1{
颜色：绿色；
}
#标题-3{
}
.说明{
宽度：250px；
高度：300px；
}

你好，世界（标题3）（1）
你好，世界（标题3）（2）
$（文档）.ready（函数（）{
变量$header=$（“.header”）
console.log（“标题长度”）
log（$header.length）
setTimeout（函数（）{
$（'body'）.css（“背景色”，“蓝色”）
$（'h1'）.css（“颜色”、“紫色”）
$（'h1'）.text（“蝙蝠侠”）
$（'h1:n第五个孩子（5）'）。文本（“铁人”）
$（#标题-3'）。文本（“美国船长”）
$（“.header”）.css（“背景色”、“绿色”）.css（“填充”、“30px”）
}，6500）//单位为毫秒
setTimeout（函数（）{
$（'body'）.css（“背景色”、“黄色”）
$（'h1'）.css（“颜色”、“紫色”）
$（'h1:nth儿童（1）'）。文本（“狼獾”）
$（'h1:n子项（2）'）。文本（“磁电机”）
$（'h1:n第四个孩子（4）'）。文本（“Thanos”）
$（“.header”）.css（“背景色”、“绿色”）.css（“填充”、“30px”）
}，8500）//单位为毫秒
})
另一段
事实证明，自动驾驶汽车与自动驾驶的人类没有什么不同：
今天，一代人从2004年Darpa的开创性挑战中走了出来
他说：“炒作超越了现实，但老实说，它的发展速度比我想象的要快。”
汽车制造商仍希望在2021年实现这一愿景。
从软银筹集了10亿美元的Nuro表示，存放在自动驾驶领域的现金提供了关键的乐观情绪。“这不会改变我们的计划或使命，

$（文档）.ready（函数（）{
变量$description=$（“.description”）
console.log（$description.css（“高度”））
console.log（$description.height（））
})

更新2

感谢j08691的回答。

您的示例的问题在于您的实现。正如jQuery的文档所说（我的重点）：

：nth child（n）伪类很容易与.eq（n）混淆调用，即使这两种方法可能会导致显著不同的匹配结果元素。对于：n个子元素（n），所有子元素都将被计数，而不考虑它们是什么，并且仅当指定的元素匹配附加到伪类的选择器

换句话说，

：n个child

不关心第n个

元素是什么，它计算所有内容，在您的示例中，script元素是主体的子元素，因此它被计算。如果您将其移动到页面末尾，它将按预期工作

$（'h1:nth child（4）'）。文本（“铁人”）；
你好，世界（1）
你好，世界（2）
你好，世界（3）
你好，世界（4）
你好，世界（5）
你好，世界（6）
你好，世界（标题3）（1）
你好，世界（标题3）（2）
无法重新创建此问题。您的代码运行良好。此处也无需重新编写。请发布。此外，ID必须是唯一的。在这种情况下，您的代码工作正常。因为第一个子项是脚本，而不是H1。如果您希望始终选择第三个H1，则需要以不同的方式执行。谢谢您也知道，您应该只在极少数情况下执行此操作一个页面上有多个h1，可能作为一个节元素的标题。我建议使用pseudo类型，尽管我没有在您的案例中测试过：嘿，Nathanel，我只是在做一个测试练习。谢谢您的建议。
 var $header = $(".header")        
 console.log("header length")
 console.log($header.length)

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

     <style>
    /*body {
      background-color: red;
    }*/
    h1 {
      color: green;
    }

    #header-3 {

    }
    .description {
      width: 250px;
      height: 300px;
    }
  </style>


  </head>
  <body>

    <h1 class='header' id='header-3'>Hello, world (Header 3)(1)</h1>
    <h1 class='header' id='header-3'>Hello, world (Header 3)(2)</h1>
   

 
   <script type="text/javascript">
      $(document).ready(function(){

    
        var $header = $(".header")        
        console.log("header length")
        console.log($header.length)
        

        setTimeout(function(){
            $('body').css("background-color", "blue")
            $('h1').css("color", "purple")
            $('h1').text("Batman")
            $('h1:nth-child(5)').text("Ironman")
            $('#header-3').text("Captain America")
            $(".header").css("background-color", "green").css("padding", "30px")
        }, 6500) // in ms
     

        setTimeout(function(){
            $('body').css("background-color", "yellow")
            $('h1').css("color", "purple")
            $('h1:nth-child(1)').text("Wolverine")
            $('h1:nth-child(2)').text("Magneto")
            $('h1:nth-child(4)').text("Thanos")
            $(".header").css("background-color", "green").css("padding", "30px")
        }, 8500) // in ms
      
 })

   </script>




    <p class='description'>Another Paragraph</p>
    <p class='description'>It turns out self-driving cars aren’t dissimilar from self-driving humans: 
Today, a generation removed from the seminal 2004 Darpa challenge in which the 

“The hype got ahead of the reality, but honestly, it’s gone way faster than I would have ever believed,” says 

automaker still hopes to fulfill that vision by 2021.

Nuro, which rounded up $1 billion from SoftBank, said the cash being deposited in the self-driving landscape has provided a critical slug of optimism. “It doesn’t change our plan or our mission,

</p>




 
   <script type="text/javascript">
      $(document).ready(function(){


        var $description = $(".description")
  

       
        console.log($description.css("height"))
       
        console.log($description.height())


       
       
      
 })

   </script>



   <!-- Optional JavaScript -->
    <!--  Popper.js first, then Bootstrap JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>