smallest-div

Find Smallest Div With Jquery

In this Article, jQuery code to find smallest/shortest div element with respect to height of div element. The jQuery code iterates through all the div elements and finds the smallest and then highlight it.

Below show you the way to find smallest div

The HTML code of Div:

<div style="height:40px;width:200px">My height is 40px</div><br/>
<div style="height:50px;width:200px">My height is 50px</div><br/>
<div style="height:30px;width:200px">My height is 30px</div><br/>
<div style="height:35px;width:200px">My height is 35px</div><br/>

CSS Code :

body
{
    padding: 10px;
}

div
{
    <strong>font</strong>-family:Calibri;
    <strong>font</strong>-size:12pt;
    border: 1px solid black;
    padding-left:5px;
}

Finally Javascript Code:

$(document).ready(function() {
    var allDivs = $('div');
    var dvSmallest = allDivs[0];
    $(allDivs).each(function() {
        if ($(this).height() < $(dvSmallest).height())
            dvSmallest = $(this);
    });
    $(dvSmallest).css('border', '2px solid red');
});

Now you check smallest div color change when script run.

Related Posts


Leave a Reply

Your email address will not be published. Required fields are marked *


*