javascript - 如何使用 JQuery 找到最短的 div

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...> 

如何使用 JQuery 找到最短的div？

例如，上面会导致 div id="c3" 因为它的高度是 90px。

Answer 1

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

Answer 2

以下是不使用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

使用 jQuery.height()方法，该方法返回元素的计算高度值。

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

Answer 4

你真的想要最小的吗？还是您只想要高度最小的那个？这些是不同的东西。$(this).height() * $(this).width()这是一个按面积找到最小的解决方案（但您可以通过替换为来使其按高度$(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);