文章/答案/技术大牛

发布

社区首页 >问答首页 >‘h1:n个孩子(5)’选择第3个孩子，而不是第5个孩子

问‘h1:n个孩子(5)’选择第3个孩子，而不是第5个孩子
EN

Stack Overflow用户

提问于 2020-07-20 02:46:19

回答 1查看 83关注 0票数 2

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

<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 (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的回答。

html

jquery

css

css-selectors

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-20 03:07:05

您的示例的问题在于您的实现。正如jQuery的*第九个孩子文档所说的(强调我的)：

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>

另一种选择是*第n种类型，它将按照您的预期执行，并将脚本元素作为第一步离开。

$('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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62987921

复制

相似问题

问‘h1:n个孩子(5)’选择第3个孩子，而不是第5个孩子
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问‘h1:n个孩子(5)’选择第3个孩子，而不是第5个孩子EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问‘h1:n个孩子(5)’选择第3个孩子，而不是第5个孩子
EN