JQuery получить все изображения в элементе, превышающем определенный размер

Question

Итак, у меня есть местозаполнитель изображения, и я хочу загрузить первое изображение из HTML в элементе DIV, который больше, чем ширина или высота 70 пикселей. Затем предоставьте следующую и предыдущую ссылку для загрузки следующего изображения размером более 70 пикселей.

Я знаю, что в 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;
  }
}

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

... сделать сохранение для предыдущей кнопки, кроме уменьшения и изменения логики нуля.