for 循环中元素的批量分配

Question

我正在处理从 API 中提取信息的问题，我想获取该数据并将其插入到 for-loop 中不同类的某些元素中。现在我正在通过 switch-statement 包装在 .each() 方法中来完成此操作。似乎这种方式对于一个人来说是重复的，并且可能比任何方式都更注重性能。有没有一种更简洁高效的方式来实现？

var tracks = [{number: "01", title: "Track 1", duration: "5:35"}, {number: "02", title: "Track 2", duration: "5:15"}, {number: "03", title: "Track 3", duration: "5:07"}, {number: "04", title: "Track 4", duration: "0:16"}, {number: "05", title: "Track 5", duration: "5:35"}];

for (var i = 0, trackNumber, trackTitle, trackDuration; i < tracks.length; i++) {
  trackNumber   = tracks[i]["number"];
  trackTitle    = tracks[i]["title"];
  trackDuration = tracks[i]["duration"];
  
  $("span").each(function() {
    switch($(this).attr("class")) {
      case "number":
        $(".number").eq(i).text(trackNumber);
      case "title":
        $(".title").eq(i).text(trackTitle);
      case "duration":
        $(".duration").eq(i).text(trackDuration);
      default:
        //
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td><b>No</b></td>
      <td><b>Title</b></td>
      <td><b>Duration</b></td>
    </tr>
  </thead>
  <tr>
    <td><span class="number"></span></td>
    <td><span class="title"></span></td>
    <td><span class="duration"></span></td>
  </tr>
  <tr>
    <td><span class="number"></span></td>
    <td><span class="title"></span></td>
    <td><span class="duration"></span></td>
  </tr>
  <tr>
    <td><span class="number"></span></td>
    <td><span class="title"></span></td>
    <td><span class="duration"></span></td>
  </tr>
  <tr>
    <td><span class="number"></span></td>
    <td><span class="title"></span></td>
    <td><span class="duration"></span></td>
  </tr>
  <tr>
    <td><span class="number"></span></td>
    <td><span class="title"></span></td>
    <td><span class="duration"></span></td>
  </tr>
</table>

Answer 1

您可以使用：

 $("span.number").eq(i).text(trackNumber);
 $("span.title").eq(i).text(trackTitle);
 $("span.duration").eq(i).text(trackDuration);

Answer 2

怎么样：

var attr = $(this).attr("class");
$("." + attr).eq(i).text(tracks[i][attr]);

Answer 3

你可以编码：

$('tbody td span').text(function() {
    var i = this.parentNode.parentNode.rowIndex - 1;
    return tracks[i][this.className];
});

在上面的代码片段中，tr 元素的 rowIndex 用于按索引获取特定数组的元素。使用括号表示法 ([index]) 和 span 元素的 className，相应的属性的值由 text 方法设置。 Here is a demo.

由于 table 在 thead 元素中有一个 1 行，因此 tbody 元素的第一个 tr 子元素的 rowIndex 是 1。这就是返回值减1的原因。

请注意，您应该考虑根据返回的数据生成 tr 元素。使用模板库是一种选择。

编辑：你也可以使用原版 JavaScript:

var spans = document.querySelectorAll('tbody td span');
Array.prototype.forEach.call(spans, function (el) {
    var i = el.parentNode.parentNode.rowIndex - 1;
    el.textContent = tracks[i][el.className];
});

for 循环中元素的批量分配

Mass assignment for elements in a for loop

html

javascript

jquery

for-loop

switch-statement