javascript - 'h1:nth-child(5)' 选择第三个而不是第五个孩子
问题描述
据我所知,这些都是 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 元素。而它实际上调整了 4th。
当我写这篇文章时,$('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的文档所说(强调我的):
:nth-child(n) 伪类很容易与 .eq(n) 调用混淆,尽管两者可能导致匹配的元素截然不同。使用 :nth-child(n) 时,所有子元素都会被计算在内,无论它们是什么,并且仅当指定的元素与附加到伪类的选择器匹配时才会被选中。
换句话说,:nth-child
不关心nth
元素是什么,它计算所有内容,在您的示例中,脚本元素是主体的子元素,因此它被计算在内。如果将其移动到页面末尾,它会按预期工作
$('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>
推荐阅读
- ios - 更改以编程方式创建的自定义 inputAccessoryView 的高度?迅速 4
- c# - 从消息框中的文本框中的 ArrayList 中获取单个值
- sql-server - 将 sys.databases 视图限制为可连接的数据库
- log4j - log4j.configurationFile 系统属性
- dart - 所有小部件上的 Flutter 工具提示
- javascript - Is it possible to know the 'this' object before calling the constructor?
- android - 有没有调整位图图像大小的方法?
- jpa - 使用 jpa 编辑实体
- angular - 从响应中的 URL 下载图像
- hyperledger-fabric - Hyperledger Composer 通道概念