Question

I’m trying to add an if statement which checks if the image is wider than 199px and if it hasn’t got a < a > parent element.
This works:

    $('div.post_body').each(function() {
    $(this).find('img').each(function () {
        var img = $(this);
            if (img.is('a') !== true) {
                img.wrap($('<a/>').attr('href', img.attr('src')).addClass('lightview limg'));
            }
    });
});

This works

    $('div.post_body').each(function() {
    $(this).find('img').each(function () {
        var img = $(this);
            if (img.width() > 199) {
                img.wrap($('<a/>').attr('href', img.attr('src')).addClass('lightview limg'));
            }
    });
});

This DOESN’T work:

    $('div.post_body').each(function() {
    $(this).find('img').each(function () {
        var img = $(this);
            if ((img.width() > 199) && (img.is('a') !== true)) {
                img.wrap($('<a/>').attr('href', img.attr('src')).addClass('lightview limg'));
            }
    });
});

Can someone help please?

Answer 1

So you want all images directly inside the div that exceed a certain dimension?

$("div.post_body > img").wrap(function(){
    if ( $(this).width() > 199 ) {
        return $("<a>").attr("href", this.src).addClass("lightview limg");
    }
});​

Demo: http://jsfiddle.net/BQAZH/1/