jQuery lấy tất cả hình ảnh trong một phần tử lớn hơn một kích thước cụ thể

Question

Vì vậy, tôi có một trình giữ chỗ hình ảnh và tôi muốn tải hình ảnh đầu tiên từ HTML trong một phần tử DIV rộng hơn 70px hoặc chiều cao. Sau đó cung cấp liên kết tiếp theo và trước đó để tải hình ảnh tiếp theo lớn hơn 70px.

Tôi biết jQuery có một bộ chọn ưu tiên tiếp theo là & nhưng tôi không chắc chắn cách tôi sẽ kết hợp điều này với các liên kết tiếp theo hoặc trước đó hoặc chỉ định kích thước hình ảnh.

Answer 1

Để có được tất cả hình ảnh lớn hơn mà một số kích thước mà bạn có thể sử dụng một cái gì đó như thế này:

var allImages = $('img', yourDivElement) 

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

Để có được next/prev không phải là khó khăn hơn:

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

mẫu trước có thể được overkill nếu bạn có rất nhiều hình ảnh, vì vậy, bạn có thể muốn thay thế chúng theo cách này:

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

Làm điều này theo hai bước:

1) tag những hình ảnh phù hợp với các tiêu chí

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

2) Treo lên navigation

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

... làm tiết kiệm cho nút trước , ngoại trừ giảm và thay đổi logic không.