据我所知，这些都是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>
我检查了控制台日志，它们暗示我有 8 个 H1 元素。
var $header = $(".header")
console.log("header length")
console.log($header.length)
当我写这篇文章时$('h1:nth-child(5)').text("Ironman")我预计它会调整第 5 个 H1 元素。而它实际上调整了第四个。
当我写这篇文章时$('h1:nth-child(4)').text("Thanos")我预计它会调整第四个元素。而它实际上调整了第三个。
根据 w3schools ( https://www.w3schools.com/jquery/sel_nthchild.asp )，第一个元素的索引号为 1。
有人可以澄清发生了什么吗？
更新
这是我的所有代码(对于粘贴到 StackOverflow 中的困惑方式表示歉意)。
<!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>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<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>
更新2
谢谢 j08691 的回答。
最佳答案
您的示例的问题在于您的实现。作为 jQuery 的文档 :nth-child说(强调我的):
The :nth-child(n) pseudo-class is easily confused with the .eq( n ) call, even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class.
换句话说， :nth-child 并不关心 nth 元素是什么，它会计算所有内容，在您的示例中， script 元素是 body ，所以它正在被计算。如果您将其移至页面末尾，它将按您的预期工作
$('h1:nth-child(4)').text("Ironman");<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'>Hello, world (Header 3)(2)</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>另一种替代方案可以满足您的期望，并将脚本元素保留为第一个元素::nth-of-type :
$('h1:nth-of-type(4)').text("Ironman");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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'>Hello, world (Header 3)(2)</h1>关于javascript - 'h1 :nth-child(5)' selects 3rd and not 5th child，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62987921/