jQuery获取大于特定大小的元素中的所有图像 [英] jQuery get all images within an element larger than a specific size

问题描述

因此，我有一个图像占位符，我想在大于或等于70px宽度或高度的DIV元素中从HTML加载第一张图像.然后提供下一个和上一个链接，以加载大于70px的下一个图像.

So I have an image placeholder and I want to load the first image from the HTML within a DIV element that is larger than 70px width or height. Then provide a next and previous link to load the next image that is larger than 70px.

我知道jQuery具有下一个&上一个选择器，但我不确定如何将其与下一个和上一个链接配合使用或指定图像大小.

I know jQuery has a next & prev selector but I'm not sure how I would tie this in with next and previous links or specify an image size.

推荐答案

要使所有图像放大到某个尺寸，您可以使用如下所示的内容:

To get all images larger that some size you can use something like this:

var allImages = $('img', yourDivElement)

var largeImages = allImages.filter(function(){
  return ($(this).width() > 70) || ($(this).height() > 70)
})

获取next/prev并不困难:

var nextElement = $(imgElement).nextAll().filter(function(){
  return ($(this).width() > 70) || ($(this).height() > 70)
}).eq(0);

如果您有很多图像，则先前的示例可能会过大，因此您可能希望通过以下方式遍历'em:

Previous sample can be overkill if you have a lot of images, so you may want to loop over 'em instead in this way:

var nextElement, nextSilblings = $(imgElement).nextAll();

for (var i=0;i<nextSilblings.length;i++){
  if (($(nextSilblings[i]).width() > 70) || ($(nextSilblings[i]).height() > 70)){
    nextElement = nextSilblings[i];
    break;
  }
}

这篇关于jQuery获取大于特定大小的元素中的所有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！