jQuery get all images within an element larger tha

问题:

So I have an image placeholder and I want to load the first image from the HTML within a DIV element that is larger than 70px width or height. Then provide a next and previous link to load the next image that is larger than 70px.

I know jQuery has a next & prev selector but I'm not sure how I would tie this in with next and previous links or specify an image size.

回答1:

To get all images larger that some size you can use something like this:

var allImages = $('img', yourDivElement)

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

To get the next/prev is not harder:

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

Previous sample can be overkill if you have a lot of images, so you may want to loop over 'em instead in this way:

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

回答2:

Do this in two steps:

1) tag the images that fit the criteria

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

2) Hook up 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;
         }
    })

...do the save for the previous button, except decrement and change zero logic.