jQuery获取元素内所有大于特定尺寸的图片

Question

我有一个图片占位符，希望从HTML中加载第一张大于70像素宽度或高度的图片到一个DIV元素中。然后提供“下一张”和“上一张”链接以加载下一张大于70像素的图片。

我知道jQuery有“下一个”和“上一个”选择器，但我不确定如何将其与下一个和上一个链接结合起来，或者如何指定图像大小。

- Chris Dowdeswell

---

“从 DIV 元素内的数据” 是什么意思？你能提供实际的 HTML 代码吗？图片列表是从哪里来的？ - jfriend00

请提供代码示例/上下文，我很乐意帮忙。目前我很难理解您想要完成的具体内容。如果代码很多，请使用jsfiddle.net。 - Anders Arpi

我没有任何代码，我只是在一个DIV元素中加载了HTML，并且我想创建一个带有下一个和上一个的图像，可以循环滚动DIV容器中所有大于70px的图像。 - Chris Dowdeswell

Answer 1

获取所有尺寸大于某个值的图片，您可以使用以下代码：

要获取所有尺寸大于某个大小的图像，您可以使用以下内容：

var allImages = $('img', yourDivElement)

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

获取下一个/上一个并不困难：

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

- Juicy Scripter

---

他问了宽度或高度。;) 但是因为写下我认为他可能想要的内容而加1分。 - Anders Arpi

该死，没有jQuery选择器？我猜这样做就可以了 :) - gak

我怎样才能自动从这些找到的图片中创建一个画廊？请参考https://dev59.com/7G7Xa4cB1Zd3GeqPoVHd。 - rubo77

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

执行保存前一个按钮的操作，除了递减并更改零逻辑。

- Diodeus - James MacFarlane