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

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)")
.. it返回具有.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嵌套在单独的父级中的问题？
[我正在尝试定位页面上的前十个图像，这些图像具有一类.lazy，我正在使用Launch来延迟加载图像，它等待滚动加载图像，但是您可以使用触发所有图像的加载。 ..

您可以使用lt选择器选择前lt个元素。

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

index

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

您也可以使用Demo。从某种意义上讲，切片可以更强大，您可以在一系列元素之间应用属性

slice()
这里是代码段：

$("#portfolio .portfolio-item img.lazy").slice(0,10).trigger("unveil");
$(document).ready(function() {
  $('div').slice(2, 5).css('background-color', 'red');
});
div {
  border: 1px solid black;
  height: 50px;
  width: 50px;
  display: inline-block;
}

Answer 1

您可以使用lt选择器选择前lt个元素。

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

Answer 2

您也可以使用Demo。从某种意义上讲，切片可以更强大，您可以在一系列元素之间应用属性

slice()
这里是代码段：