how to find the shortest element

Question

I have four divs inside a wrap
need the shortest of the first three (a, b, or c) to be red

let a = $('#cola').height();
let b = $('#colb').height();
let c = $('#colc').height();
//$(shortest).css('background', 'red');

.wrap{
text-align:center;
}
.col{
display:inline-block;
vertical-align:top;
width:14%;
background:gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<div class='col cola' id='cola'><br><br><br><br></div>
<div class='col colb' id='colb'><br><br></div>
<div class='col colc' id='colc'><br><br><br><br><br><br></div>
<div class='col cold' id='cold'><br><br></div>
</div>

@HereticMonkey - getting min value from array - is not getting the div having that value — vegas, Apr 20 '21 at 23:26
It is one small step from it. You know the values `a`, `b`, and `c` and which correspond to which `div`, so get the smallest value, get the `div` that corresponds with that value. — Heretic Monkey, Apr 20 '21 at 23:29
@HereticMonkey - can't believe. So simple. You're a genius. Thanks for help — vegas, Apr 20 '21 at 23:41

score 1 · Answer 1 · answered Apr 20 '21 at 23:43

You could create a jQuery plugin that can select the first element where it has the shortest height. I even included a selection method for the tallest.

/* jquery.shortest-element.js */
(function($) {
  $.reduce = function(arr, callback, initialValue) {
    $.each(arr, function(index, currValue) {
      initialValue = callback.call(currValue, initialValue, currValue, index, arr);
    });
    return initialValue;
  };
  $.fn.reduce = function(callback, initialValue) {
    return $.reduce(this, callback, initialValue);
  };
  $.fn.shortest = function() {
    return $(this.reduce(function(prev) {
      var height = $(this).height();
      return height < prev.height ? { el: this, height: height } : prev;
    }, { height: Number.MAX_VALUE }).el);
  };
  $.fn.tallest = function() {
    return $(this.reduce(function(prev) {
      var height = $(this).height();
      return height > prev.height ? { el: this, height: height } : prev;
    }, { height: Number.MIN_VALUE }).el);
  };
})(jQuery);

$('.col').shortest().css('background', 'red');
$('.wrap > *').tallest().css('background', 'green');

.wrap {
  text-align: center;
}

.col {
  display: inline-block;
  vertical-align: top;
  width: 14%;
  background: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="col cola" id="cola"><br><br><br><br></div>
  <div class="col colb" id="colb"><br><br></div>
  <div class="col colc" id="colc"><br><br><br><br><br><br></div>
  <div class="col cold" id="cold"><br><br></div>
</div>

thanks for your effort. I hope there is an one-line solution - `div having height x` — vegas, Apr 20 '21 at 23:47

score 1 · Answer 2 · answered Apr 20 '21 at 23:54

hope this answer can help your problem. I put code from here

its a small code from you

let a = $('#cola')
let b = $('#colb')
let c = $('#colc')
 
// its joining your variable into array of object with label
let myArray = [
  {label : "cola", height : a.height()},
  {label : "colb", height : b.height()},
  {label : "colc", height : c.height()}
] 

// its a magic from https://stackoverflow.com/questions/8864430/compare-javascript-array-of-objects-to-get-min-max
// you can improve this code for better performance
let lowest = Number.POSITIVE_INFINITY;
let label
let tmp;
for (let i=myArray.length-1; i>=0; i--) {
    tmp = myArray[i].height;
    if (tmp < lowest) {
      lowest = tmp
      label = myArray[i].label
    }
};
// printing your shortest col
console.log(lowest)
console.log(label)

// then setting the shortest component to red 
$(`#${label}`).css("background","red")

    .wrap{
      text-align:center;
    }
    .col{
      display:inline-block;
      vertical-align:top;
      width:14%;
      background:gold;
    }

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
</head>
<body>
<div class='wrap'>
  <div class='col cola' id='cola'><br><br><br><br></div>
  <div class='col colb' id='colb'><br><br></div>
  <div class='col colc' id='colc'><br><br><br><br><br><br></div>
  <div class='col cold' id='cold'><br><br></div>
</div>

charlietfl · Answer 3 · 2021-04-21T00:26:36.420

Another really simple plugin function approach. Only returns one element and in case of ties returns the first found

$.fn.shortest=function(){  
  return this.toArray().reduce(($a, el) => {
     const $el = $(el);
     return $el.height() < $a.height() ?  $el : $a
  }, this.first())
}

$('.wrap .col').shortest().css('background', 'red')

.wrap{
text-align:center;
}
.col{
display:inline-block;
vertical-align:top;
width:14%;
background:gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<div class='col cola' id='cola'><br><br><br><br></div>
<div class='col colb' id='colb'><br><br></div>
<div class='col colc' id='colc'><br><br><br><br><br><br></div>
<div class='col cold' id='cold'><br><br></div>
</div>

how to find the shortest element

3 Answers3