images only with jQuery

by Vladimir Starkov aka matmuchrapna

HTML

<div>


<div class="blog-post">
    <div>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
    </div>
    <div>
        <p>some text</p>
        <img src="//placekitten.com/g/100/100" alt="" />
    </div>
    <div> <!-- only this div would be applied class `only-images` customizable by css  -->
        <img src="//placekitten.com/g/100/100" alt="" />
        <img src="//placekitten.com/g/100/100" alt="" />
    </div>
</div>

</div>

CSS

/* demo only css rule */
.blog-post > div {
    padding: 5px;
    background-color: #bbb;
    margin-top: 10px;
}

.blog-post > .only-images {
    background-color: red; /* color is demo only */
}

JavaScript

$(function() {
    var divs = $('.blog-post > div');

    $.each(divs, function(i, div) {
        /* cache variable */
        var $div = $(div);
        if ( !($div.find('p')[0]) ) { /* if there are no one p tag inside div */
            $div.addClass('only-images');
        }
    });
});