jQuery获取大于特定大小的元素内的所有图像

Question

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

我知道jQuery有一个next&prev选择器,但我不确定如何将它与下一个和上一个链接联系起来或指定一个图像大小.

Answer 1

为了使所有图像更大,你可以使用这样的东西:

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);

如果您有大量图像,以前的示例可能会过度杀伤,因此您可能希望以这种方式循环使用它们:

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;
  }
}