Question

我试图定位我页面上的前十个图像，这些图像的类别为.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)")

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

我做错了什么？有没有办法选择前十个而不是使用jQuery＆＃39; s .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嵌套在单独的父级中的问题吗？

Answer 1

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

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

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

Demo

Answer 2

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

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

这是fiddle

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

2 个答案: