javascript - php javascript - 如何突出显示最低值

Question

我的目标是获取并突出显示 li 内小数点之间的最低值。

<ul class="list-group">
    <li class="list-group-item" style="border:2px solid ;" data-distance="31.5">Test 31.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="21.5">Test 21.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="11.5">Test 11.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="51.5">Test 51.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="61.5">Test 61.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="11.5">Test 11.5</li>
</ul>

我的代码:

  <script type='text/javascript'>
$(window).load(function()
{
    $($("[data-distance]").get().sort(function(a, b) 
    {
        return a.getAttribute("data-distance") - b.getAttribute("data-distance");
    })[0]).css("border-color", "red");

});
</script>

如果多个 li 具有相同的最小值，则此代码将失败。我想突出显示每个最小值 - 我该怎么做？

Answer 1

试试这个:

// Get the lowest value first
var low = $("[data-distance]").get().sort(function(a, b) {
    return a.getAttribute("data-distance") - b.getAttribute("data-distance");
})[0].getAttribute("data-distance");

// Then loop through and update those that match the lowest
$("[data-distance]").each(function(a){
    if (this.getAttribute("data-distance") == low) {
        $(this).css("border-color", "red");
    }
});

演示:http://jsfiddle.net/grydawp4/1/