jQuery uzyskać wszystkie obrazy w elemencie większym niż określony rozmiar

Question

Mam zatem element zastępczy obrazu i chcę załadować pierwszy obraz z HTML w ramach elementu DIV, który jest większy niż szerokość lub wysokość 70px. Następnie podaj następny i poprzedni link, aby załadować następny obraz większy niż 70 pikseli.

Wiem, że jQuery ma następny selektor prev z &, ale nie jestem pewien, jak powiązać go z następnymi i poprzednimi łączami lub określić rozmiar obrazu.

Answer 1

Aby uzyskać wszystkie obrazy większe, że niektóre wielkości można użyć coś takiego:

var allImages = $('img', yourDivElement) 

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

Aby uzyskać next/prev nie jest trudniejsze:

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

Poprzedni próbka może być przesadą, jeśli ciebie Mam wiele zdjęć, więc możesz zamiast tego zamieniać je w ten sposób:

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

Czy to w dwóch etapach:

1) oznaczyć obrazy, które pasują kryteria

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

2) Podłącz nawigację

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

... zrobić to zapisać do poprzedniego przycisku , z wyjątkiem dekrementacji i zmiany logiki zerowej.