1

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 の結果によって異なる場合があります。

私が望むのは、「data-distance」の値が最も低いdivのスタイルを「border:1px solid red」から「border:1px solid green」に変更することです。

上記の例では、

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

6 に答える 6

1

考えられる解決策の 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/

于 2012-08-30T17:11:45.900 に答える
0

これを行う最も簡単な方法は、ある種のループを設定することです。

たとえば、モデルを使用すると、次のようになります。

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/

于 2012-08-30T17:09:14.950 に答える
0 
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');

動作するはずです。

于 2012-08-30T17:09:30.317 に答える
0

あなたのコードは次のようになります。

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​

あなたの作業フィドル

ワーキングデモ

于 2012-08-30T17:21:10.677 に答える
0

これにより、値が最も低いすべてのアイテムのスタイルが変更されます。

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

デモ: http://jsfiddle.net/Guffa/YBtgV/

于 2012-08-30T17:21:37.147 に答える
0

簡単な方法:

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

于 2012-08-30T17:13:00.160 に答える