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结果而异。

我想要的是将样式从“border：1px solid red”更改为“border：1px solid green”，以获得“data-distance”值最低的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");

DEMO： http://jsfiddle.net/CrCZR/

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

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

应该有用。

Answer 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

Answer 5

您的代码将如下所示：

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

Answer 6

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

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

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

突出显示最低值

6 个答案: