如何在CoffeeScript中使用模数编写交替行函数？

我在这里有一个典型的JavaScript代码块（代码将应用背景风格类到表中交替的奇数或偶数行）。我试图在CoffeeScript中重写这个，试图学习它。 CoffeeScript范围的语法是不同的，更多的Ruby风格。我非常感谢你如何做到这一点的例子？如何在CoffeeScript中使用模数编写交替行函数？

function alternate(id){ 
    if(document.getElementsByTagName){ 
     var table = document.getElementById(id); 
     var rows = table.getElementsByTagName("tr"); 
     for(i = 0; i < rows.length; i++){   
    //manipulate rows 
     if(i % 2 == 0){ 
      rows[i].className = "even"; 
     }else{ 
      rows[i].className = "odd"; 
     }  
     } 
    } 
    }

更新

我使用jQuery和尝试这一点，但它不工作（它使所有行#EFEFEF）：

$(document).ready -> 
    rowCount = $('tbody tr') 
    for row in rowCount   
     if row.length % 2 == 0 
      $('tbody tr').css('background-color', '#363636') 
     else 
      $('tbody tr').css('background-color', '#efefef')

来源

2010-11-18 Handloomweaver

一点更简洁：

for row, i in $('tbody tr') 
    color = if i % 2 is 0 then '#363636' else '#efefef' 
    $(row).css 'background-color', color

来源

2010-11-18 18:37:17 jashkenas

那太优雅了！你能分解并解释这是怎么回事？我是编程新手。对于初学者来说，CoffeeScript文档仍然太稀少，但如果我得到一个很好的解释，我可以理解 – Handloomweaver 2010-11-18 19:19:44

当然。 “for row，i in list”将为列表中的每个项目运行一个循环，将项目分配给变量“row”，并将当前循环索引编号分配给变量“i”。 “$（tbody tr）”是我们的标签列表。下一行将两种CSS颜色中的任何一种指定给变量“color”，具体取决于“i”是偶数还是奇数。最后，第三行使用jQuery的“css”函数来设置“backround-color”CSS样式。 – jashkenas 2010-11-18 20:42:08

这太棒了！我无法弄清楚如何让索引分配给我可以使用的变量。 – dontangg 2011-08-20 22:42:26

尝试for row, i in rows，其中i保持环计数器。

来源

2010-11-18 18:28:36 matyr

您可能也有兴趣的jQuery

$('tbody tr:even').css 'background-color', '#363636' 
$('tbody tr:odd').css 'background-color', '#efefef'

来源

2010-11-21 03:13:17 minikomi

提供的偶/奇元选择。如果你的最终目标是只是一个不同的样式应用到奇数/偶数行，你可以试试这个：

// CSS file 

#myTable tr:nth-child(even) { background-color: #363636; } 
#myTable tr:nth-child(odd) { background-color: #efefef; }

没有JS在这里，只是普通的CSS，这是很好的，因为造型介绍关注。

但它只适用于（相对）现代的浏览器：IE 9+，Firefox 4+，Chrome ...

来源

2012-09-13 06:42:23 Gromix

如何在CoffeeScript中使用模数编写交替行函数？

回答

相关问题