nth:child(1)不返回任何元素,nth-child(2)返回第一个元素

时间:2018-11-17 23:48:34

标签: jquery html css html5 css3

我遇到一个奇怪的问题。我在jQuery中使用了nth-child,现在当我使用element时: nth-child(1)我没有响应当我使用element:first时我得到了元素 first 元素。就像有一个我看不见的神秘元素,希望这里的人能弄清楚。

html:

<section id="portfolio">
      <h1>My Projects</h1>
      <div class="slider">
        <div class="left">
          <div class="arrow"><span class="left-arrow"></span></div>
        </div>

        <div class="app">
          <div class="image"><img src="./images/movies.jpg" alt="" /></div>
          <ul>
            <li><span> Name: </span> Movies WebApp</li>
            <li><span>Description:</span> Manage movise stock</li>
            <li><span>Backend:</span> -</li>
            <li><span>Frontend:</span> Angular, CSS, Html</li>
            <li><span>DB:</span> -</li>
            <li><span>link:</span></li>
          </ul>
        </div>
        <div class="app">
          <div class="image"><img src="./images/coupon.jpg" alt="" /></div>
          <ul>
            <li><span> Name: </span> Movies WebApp</li>
            <li><span>Description:</span> Manage movise stock</li>
            <li><span>Backend:</span> -</li>
            <li><span>Frontend:</span> Angular, CSS, Html</li>
            <li><span>DB:</span> -</li>
            <li><span>link:</span></li>
          </ul>
        </div>

        <div class="right">
          <div class="arrow"><span class="right-arrow"></span></div>
        </div>
      </div>
      <ol class="pagination"></ol>
    </section>

jquery:

 $(document).ready(function() {
  var itemsLength = $('.app').length;
  console.log('for first:  ', $('.app:first'));
  console.log('for nth-child(1):  ', $('.app:nth-child(1)'));
  console.log('for nth-child(2):  ', $('.app:nth-child(2)'));
  console.log('app elements length: ', itemsLength);
  var position = 1;
  for (let i = 0; i < itemsLength; i++) {
    $('.pagination').append('<li><span class="fas fa-circle"></span></li>');
  }
  $('.app').hide();
  $('.app:first').show();
  $('.pagination li:nth-child(1)').css('color', '#4d4d4d');

输出: enter image description here

如您所见,对于nth-child(2)和first,我的日志相同,对于nth-child(1)和first,我的日志不同。 是什么原因造成的?

注意:我已经看到了与我类似的问题,但不完全是,没有任何问题显示第n个孩子与第一个孩子之间的区别。因此,这不是重复的

0 个答案:

没有答案