JQuery height condition

$(document).ready(function() {
var pic = $(".pic");

// need to remove these in of case img-element has set width and height
$(".pic").each(function() {
    var $this = $(this开发者_运维问答);
    $this.css({width: 'auto', height: 'auto'});

    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    if(pic_real_width<100){
    $(".pic").css("display","none");
    }
    });

 });

I need this to check for the height of all images of the .pic class (it already does this) and then add a display:none to those who have a certain size. (e.g. if an img has under 100px width it should not be displayed)

This should do the trick:

$(document).ready(function() {
    // need to remove these in of case img-element has set width and height
    $(".pic").each(function() {
        var $this = $(this);
        $this.css({width: 'auto', height: 'auto'});

        var pic_real_width = $this.width();
        var pic_real_height = $this.height();
        if(pic_real_width<100){
            $this.css("display","none");
        }
    });
 });

you ware again referencing the collection and not a concrete element