我遇到一个奇怪的问题。我在jQuery中使用了nth-child,现在当我使用element时: nth-child(1)我没有响应,当我使用element:first时我得到了元素当我使用element:nth-child(2)时,会得到 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');
如您所见,对于nth-child(2)和first,我的日志相同,对于nth-child(1)和first,我的日志不同。 是什么原因造成的?
注意:我已经看到了与我类似的问题,但不完全是,没有任何问题显示第n个孩子与第一个孩子之间的区别。因此,这不是重复的