在 jQuery 中使用 nth-of-type 选择前十个元素答案

【问题标题】：Select first ten elements using nth-of-type in jQuery在 jQuery 中使用 nth-of-type 选择前十个元素
【发布时间】：2015-07-09 10:02:03
【问题描述】：

我正在尝试定位我页面上的前十张图片，它们的类别为.lazy

我正在使用unveil 延迟加载图像，它会等待滚动加载图像，但您可以使用此行触发所有图像加载：

$("img").trigger("unveil");

我只想触发前 10 张图像以始终立即显示，所以我尝试了这个：

$("#portfolio .portfolio-item img.lazy:nth-of-type(-n+10)").trigger("unveil");

在 CSS :nth-of-type(-n+10) 中选择前十个匹配元素，但是当我使用这个 jQuery 在我的控制台上尝试这个时

$("img.lazy:nth-of-type(-n+10)")

..它返回每个类为.lazy的img

我做错了什么？有没有办法选择前十个而不是使用 jQuery 的.eq？

让您了解我的标记：

<div class="portfolio">
     <div class="portfolio-item">
          <img class="lazy" src="item-1.jpg">
     </div>
     <div class="portfolio-item">
          <img class="lazy" src="item-2.jpg">
     </div>
     <div class="portfolio-item">
          <img class="lazy" src="item-3.jpg">
     </div>
     <div class="portfolio-item">
          <img class="lazy" src="item-4.jpg">
     </div>
     etc... (there 20 items in total)
</div>

问题是每个 img 都嵌套在单独的父级中吗？

【问题讨论】：

请注意，您的选择器具有#portfolio，但元素本身具有class。
啊，是的，我在实际标记上既有一个类也有一个投资组合的 id

标签： jquery css image jquery-selectors lazy-loading

【解决方案1】：

您可以使用lt 选择器选择第一个n 元素。

选择匹配集中index小于索引处的所有元素。

$("#portfolio .portfolio-item img.lazy:lt(10)").trigger("unveil");

Demo

【讨论】：

【解决方案2】：

您也可以使用slice()。从某种意义上说，Slice 更强大，您可以在一系列元素之间应用属性

$("#portfolio .portfolio-item img.lazy").slice(0,10).trigger("unveil");

这是一个代码sn-p：

$(document).ready(function() {
  $('div').slice(2, 5).css('background-color', 'red');
});

div {
  border: 1px solid black;
  height: 50px;
  width: 50px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

【讨论】：