突出显示最低值答案

【问题标题】：Highlight the lowest value突出显示最低值
【发布时间】：2012-08-31 01:30:59
【问题描述】：

在 mysql 查询后我会显示此代码

<div id="id1" style="border:1px solid red;" data-distance="31.5">
<div id="id2" style="border:1px solid red;" data-distance="1.9">

div的个数，输出的“data-distance”值可以根据mysql结果不同。

我想要的是将样式从“border:1px solid red”更改为“border:1px solid green”的 div，它的“data-distance”值最低。

在上面的例子中是

<div id="id1" style="border:1px solid red;" data-distance="31.5">
<div id="id2" style="border:1px solid green;" data-distance="1.9">

【问题讨论】：

如果多个 div 具有相同的最低值会怎样？

标签： jquery

【解决方案1】：

这是一种可能的解决方案：

$($("[data-distance]").get().sort(function(a, b) {
    return a.getAttribute("data-distance") - b.getAttribute("data-distance");
})[0]).css("border-color", "green");

演示： http://jsfiddle.net/CrCZR/

【讨论】：

如果多个 div 具有最小值，则会失败
@AshirvadSingh 如果需要突出显示所有分钟或仅第一个，问题中未指定。

【解决方案2】：

最简单的方法是设置某种循环。

例如，使用您的模型：

var minvalue = 100000; // an arbitrary number.  Should be larger than the probable min element
var $minElement = null;

$('div[data-distance]').css('border-color','red');
$('div[data-distance]').each(function() {
  if ($(this).data('distance') < minvalue) {
    minvalue = $(this).data('distance');
    $minElement = $(this);
  }
});

$minElement.css('border-color','green');

http://jsfiddle.net/bhoover10001/2KG6D/

【讨论】：

【解决方案3】：

var minRes = -1;
var minObj = null;
$('div[data-distance]').each(function(){
    var val = parseFloat($(this).data('distance'));
    if(val < minRes || minRes < 0){
        minRes = val;
        minObj = this;
    }
});
$(minObj).css('border', '1px solid green');

应该可以。

【讨论】：

【解决方案4】：

简单方法：

var lowest = {id: '',val: Number.MAX_VALUE};
$('div').each(function() {
    if ($(this).data('distance') < lowest.val) {
        lowest.id = $(this).attr('id');
        lowest.val = $(this).data('distance');
    }
});
$('#'+lowest.id).css('borderColor','green');

jsFiddle example

【讨论】：

【解决方案5】：

这将改变所有具有最低值的项目的样式：

$('[data-distance="'+$('div').map(function(){return parseFloat($(this).data('distance'));}).sort()[0]+'"]').css('border-color','green');

演示：http://jsfiddle.net/Guffa/YBtgV/

【讨论】：

【解决方案6】：

您的代码将如下所示：

var arrayOfdistance=new Array(); //defining a Arrar Object
$('div').each(function(){arrayOfdistance.push($(this).attr('data-distance'))});  //Pushed all the distance in array object                     

var minValue= Math.min.apply(null, arrayOfdistance);      //got the min of all             
                         $('div[data-distance="'+minValue+'"]').attr('style','border:1px solid green');// applied css to all containing min value

你的工作 FIDDLE

WORKING DEMO

【讨论】：