：nth-​​child，不是从1开始的课程

Question

我正在学习jQuery，而我仍然没有了解:nth-child的工作方式。当我点击类的第一次迭代时，我试图让div消失：imgDescription。奇怪的是，jQuery将2解释为第一个孩子。当我为$('imgDescription:eq(0)')切换此脚本时，脚本按预期工作。有谁知道为什么nth-child以这种方式工作？

$('.imgDescription:nth-child(2)').click(function() {
  $('div').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="btn-primary">Learn More about Our Services</h2>
<div id="centershit">
  <br>
  <div class="imgDescription"><span><a href="#socialmedia">Social Media</a></span>
    <div class="imgcontainer">
      <img src="pics/twitter.jpeg">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#healthcare">Healthcare</a></span>
    <div class="imgcontainer">
      <img src="pics/health.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#email">Email</a></span>
    <div class="imgcontainer">
      <img src="pics/gmail.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#socialmedia">Online Shopping</a></span>
    <div class="imgcontainer">
      <img src="pics/amazon.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#socialmedia">Web Browsing</a></span>
    <div class="imgcontainer">
      <img src="pics/googling.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#device">Devices</a></span>
    <div class="imgcontainer">
      <img onClick="expanddevice()" src="pics/device.png">
    </div>
  </div>
</div>

Answer 1

只需从<br> div中移除centershit，您的代码就可以正常工作。因为它将<br>视为centershit类的第一个孩子

$('.imgDescription:nth-child(2)').click(function() {
  $('div').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="btn-primary">Learn More about Our Services</h2>
<div id="centershit">
  <div class="imgDescription"><span><a href="#socialmedia">Social Media</a></span>
    <div class="imgcontainer">
      <img src="pics/twitter.jpeg">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#healthcare">Healthcare</a></span>
    <div class="imgcontainer">
      <img src="pics/health.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#email">Email</a></span>
    <div class="imgcontainer">
      <img src="pics/gmail.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#socialmedia">Online Shopping</a></span>
    <div class="imgcontainer">
      <img src="pics/amazon.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#socialmedia">Web Browsing</a></span>
    <div class="imgcontainer">
      <img src="pics/googling.png">
    </div>
  </div>
  <div class="imgDescription"><span><a href="#device">Devices</a></span>
    <div class="imgcontainer">
      <img onClick="expanddevice()" src="pics/device.png">
    </div>
  </div>
</div>