for循环中的元素的质量分配 [英] Mass assignment for elements in a for loop

问题描述

我正在处理从API中获取信息，并希望将这些数据插入到 for-loop 中的不同类的某些元素中。现在我通过包装在 .each（）方法中的 switch-statement 来做这件事。看起来这种方式是重复的，可能比任何事情都重要。有没有办法以更简洁高效的方式来实现这一点？

var tracks = [{number：01，title：音轨1，持续时间：5:35}，{数字：02，标题：音轨2，持续时间：5:15}，{数字：03，标题：音轨3持续时间：5:07} {数字：04，标题：音轨4，持续时间：0:16}，{数字：05，标题：音轨5，持续时间：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））{casenumber：$（。number）。eq（i）.text（trackNumber） （。title）：eq（i）.text（trackTitle）; caseduration：$（。duration）。eq（i）.text（trackDuration）; default： / pre>< / pre>< code>< script src =" https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><table> < THEAD> < TR> < TD>< b取代;否< / B>< / TD> < TD>< b取代;名称< / B>< / TD> < TD>< B>持续时间< / 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>

解决方案

您可以编码：

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

在上面的代码片段 rowIndex code> tr 元素用于通过索引获取特定数组的元素。使用括号表示法（ [index] ）和 span 的 className $ c>元素，相应的属性值由 text 方法设置。 这是一个演示。

由于表格有第一个 tr thead 元素中的第一行 rowIndex tbody 元素的子元素是 1 。这就是为什么返回的值减1。





注意，您应该考虑根据 tr 元素生成元素到返回的数据。使用模板库可以是一个选项。

编辑：您也可以使用vanilla 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]; 
}）; 
  

I'm dealing with pulling in information from an API and want to take that data and inserting it into certain elements of different classes within a for-loop. Right now I'm doing this through a switch-statement wrapped inside an .each() method. It just seems that this way for one is repetitive and probably is more performance heavy than anything. Is there a way to accomplish this in a more concise and efficient way?

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>

解决方案

You could code:

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

In the above snippet rowIndex of the tr elements is used for getting a specific array's element by index. Using bracket notation ([index]) and the className of the span element the corresponding property's value is set by the text method. Here is a demo.

As the table has one 1 row in the thead element the rowIndex of the first tr child of the tbody element is 1. That's why the returned value is subtracted by 1.

As a note, you should consider generating the tr elements according to the returned data. Using a templating library can be an option.

edit: You could also use vanilla 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循环中的元素的质量分配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！