Question

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

我知道jQuery有下一个＆amp;上一个选择器，但我不确定如何将其与下一个和上一个链接联系起来或指定一个图像大小。

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

Answer 2

分两步完成：

1）标记符合标准的图像

$('#targetDiv img').each(function() {
      if($(this).height()>70) {
         $(this).addClass('biggie')
      }
})

2）连接导航

var myPos = 0;

    $('#btnNext').click(function() {
        //copy this image to the placeholder 
        $('#placeholder').attr('src', $('#targetDiv .biggie').eq(myPos).attr('src'));
         myPos++;
         if(myPos>$('#targetDiv .biggie').length) {
            myPos = 0;
         }
    })

...执行上一个按钮的保存，除了递减和更改零逻辑。

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

2 个答案: