jquery - 突出显示最低值

Question

在 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 结果而有所不同。

我想要的是将样式从“边框：1px 纯红色”更改为“边框：1px 纯绿色”的 div，它的“数据距离”值最低。

在上面的例子中，它将是

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

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

Answer 2

简单方法：

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 示例

Answer 3

您的代码将如下所示：

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​

你的工作小提琴

工作演示

Answer 4

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

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

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

Answer 5

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

例如，使用您的模型：

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/

Answer 6

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');

应该管用。