javascript - 迭代表列并获得最快的时间

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>

您可以在该表中看到，我想要的是获得这些列中的最快时间，即 split 1、split 2 和 split 3。例如，最快的 split 1 时间是 0:30.600 split 2 为 0:50.500，split 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>

所以基本上你构造一个对象来存储最快的分割。分割的格式允许您将它们存储为字符串并非常容易地比较它们。

然后，您迭代每种拆分，如果对象中没有任何先前的拆分(空字符串)，则分配该值，或者如果存储的拆分比新的拆分慢，则更新该值。