How to find shortest div with JQuery

Question

<div id="c1" class="features" style="height:100px;width:100px;"></div>
<div id="c2" class="features" style="height:120px;width:100px;"></div>
<div id="c3" class="features" style="height:90px;width:100px;"></div>
<div...> 

How do I use JQuery to find the shortest div?

For example, the above would result in div id="c3" because its height is 90px.

Answer 1

var shortest = [].reduce.call($(".features"), function(sml, cur) {
    return $(sml).height() < $(cur).height() ? sml : cur;
});

Answer 2

Here's how to do it without JQuery:

var allDivs = document.getElementsByTagName("div");

var min = 0;
var element;

for (var i = 0; i < allDivs.length; i++) {
    if (allDivs[i].className == "features") {
        if (allDivs[i].offsetHeight < min) {
            min = allDivs[i].offsetHeight;
            element = allDivs[i];
        }
    }
}

alert(element);

Answer 3

Use the jQuery .height() method, which returns the computed height value for an element.

var candidates = getSetOfDivs();
var smallest = candidates[0];
$( candidates ).each( function(e, i) {
    if( $(e).height() > smallest.height() ) smallest = $(e);
} );

Answer 4

Did you really want the smallest? Or did you just want the one with the least height? Those are different things. Here's a solution that finds the smallest one by area (but you could make it go by height by replacing $(this).height() * $(this).width() with $(this).height()).

var divs = $('.features');

var smallest;
var smallestarea = null;

$('.features').each(function () {
  var thisarea = $(this).height() * $(this).width();
  if (smallestarea === null || thisarea < smallestarea) {
    smallest = $(this);
    smallestarea = thisarea;
  }
});

document.write(smallest.attr('id'));

http://jsbin.com/ufujiy/1/edit

Answer 5

const targets = ['.div1', '.div2', '.div3'];    
const shortest = targets.reduce((sml, cur) => ($(sml).height() < $(cur).height()) ? sml : cur);