Q:

php&javascript - how to highlight the lowest value

My goal is get and highlight the lowest value between decimals within a 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>

my code:
  <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>

This code fails if multiple li has same min value. I want to highlight each min value— how can I do this?

A:

Try this:
// 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");
    }
});

Demo: http://jsfiddle.net/grydawp4/1/

