如何找到最短的元素[重复]答案

【问题标题】：how to find the shortest element [duplicate]如何找到最短的元素[重复]
【发布时间】：2021-07-15 03:35:27
【问题描述】：

我在一个 wrap 中有四个 div
需要前三个（a、b 或 c）中最短的为红色

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 - 从数组中获取最小值 - 没有得到具有该值的 div
距离它只有一小步。你知道a、b和c这三个值对应哪个div，所以取最小值，取对应那个值的div。
@HereticMonkey - 不敢相信。很简单。你是个天才。感谢您的帮助

标签： javascript jquery

【解决方案1】：

您可以创建一个 jQuery 插件，该插件可以选择第一个具有最短高度的元素。我什至包括了最高的选择方法。

/* 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>

【讨论】：

感谢您的努力。我希望有一个单一的解决方案 - div having height x
@vegas 有了插件，就是一条线解决方案。

【解决方案2】：

希望这个答案可以帮助您解决问题。我把代码来自here

这是你的一个小代码

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>

【讨论】：

【解决方案3】：

另一种非常简单的插件函数方法。只返回一个元素，如果有关系则返回第一个找到的元素

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

【讨论】：