迭代thorugh表列，並得到最快的時間

Question

我有有次三個分裂和所花費的總時間順序。這裏在這個例子中http://jsfiddle.net/0x4a2jm3/

#table { 
 
    margin: 10px auto; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
 
    font-size: 14px; 
 
    width: 600px; 
 
    table-layout: fixed; 
 
    text-align: left; 
 
    border-collapse: collapse; 
 
} 
 
#table th { 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    background: #b9c9fe; 
 
    border-top: 4px solid #aabcfe; 
 
    border-bottom: 1px solid #fff; 
 
    color: #039; 
 
    padding: 8px; 
 
} 
 
#table td { 
 
    background: #e8edff; 
 
    border-bottom: 1px solid #fff; 
 
    color: #669; 
 
    border-top: 1px solid transparent; 
 
    padding: 8px;

<table id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Lap</th> 
 
     <th>Split 1</th> 
 
     <th>Split 2</th> 
 
     <th>Split 3</th> 
 
     <th>Total Time</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>0:30.900</td> 
 
     <td>0:51.000</td> 
 
     <td>0:32.000</td> 
 
     <td>(total time)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>0:31.200</td> 
 
     <td>0:50.500</td> 
 
     <td>0:32.300</td> 
 
     <td>(total time)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>0:30.600</td> 
 
     <td>0:50.900</td> 
 
     <td>0:32.200</td> 
 
     <td>(total time)</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

表你可以在那張表中看到我想要的是在這些列中獲得最快時間，即分割1，分割2和分割3 ..例如最快分割1時間是0：30.600分割2是0：50.500和spl它3是0：32.000然後輸出它。

js代碼

$('#table tr').each(function(){ 
var sp1 = $(this).find('td:nth-child(2)').text() 
var sp2 = $(this).find('td:nth-child(3)').text() 
var sp3 = $(this).find('td:nth-child(4)').text() 
var1 = moment(sp1, "mm:ss.SSS") + moment(sp2, "mm:ss.SSS") + moment(sp3, "mm:ss.SSS") 

$(this).find('td:nth-child(5)').html(moment(var1).format("mm:ss.SSS")); 
}); 

所以是有可能做到這一點？

Answer 1

首先，如果您爲每種拆分都有一個類，那將會很棒（它會讓您的生活更輕鬆），因此您可以非常輕鬆地迭代它們。

下面的代碼做你想做的。

$(document).ready(function(){ 
 
    var splits = {"split1" : "", "split2" : "", "split3" : ""}, i; 
 

 
    for (i = 1; i <= 3; i += 1) { 
 
    $(".split" + i).each(function() { 
 
     if (splits["split" + i] === "") { 
 
     splits["split" + i] = $(this).text(); 
 
     } else { 
 
     if (splits["split" + i] > $(this).text()) { 
 
      splits["split" + i] = $(this).text(); 
 
     } 
 
     } 
 
    }); 
 
    } 
 
     
 
    alert("split1 = " + splits["split1"] + "\nsplit2 = " + splits["split2"] + "\nsplit3 = " + splits["split3"]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Lap</th> 
 
     <th>Split 1</th> 
 
     <th>Split 2</th> 
 
     <th>Split 3</th> 
 
     <th>Total Time</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td class="split1">0:30.900</td> 
 
     <td class="split2">0:51.000</td> 
 
     <td class="split3">0:32.000</td> 
 
     <td>(total time)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td class="split1">0:31.200</td> 
 
     <td class="split2">0:50.500</td> 
 
     <td class="split3">0:32.300</td> 
 
     <td>(total time)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td class="split1">0:30.600</td> 
 
     <td class="split2">0:50.900</td> 
 
     <td class="split3">0:32.200</td> 
 
     <td>(total time)</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

所以基本上你構建一個對象來存儲速度最快的分裂。分割的格式允許您將它們存儲爲字符串並非常容易地進行比較。

然後，您遍歷每種拆分，如果對象中沒有任何以前的拆分（空字符串），則分配值，或者如果存儲拆分比新拆分更慢，則更新該值。

Answer 2

檢查：

var $trs = $('#table tbody tr'), 
    $tds = $trs.find("td:not(:first):not(:last)"), 
    faster = [], 
    k = 0, 
    fastest; 

$tds.each(function(i, elm) { 
    var idx = elm.cellIndex - 1; 
    faster[idx] = faster[idx] || []; 
    faster[idx].push(moment(elm.innerHTML, "mm:ss.SSS")); 
}); 
while (k < faster.length) { 
    fastest = moment.min(faster[k]).format("mm:ss.SSS"); 
    k++; 
    $("#split" + k).html(fastest); 
} 

更新的代碼是here。