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

【问题标题】：How would you write an alternating row function using modulus in CoffeeScript?您将如何在 CoffeeScript 中使用模数编写交替行函数？
【发布时间】：2011-05-12 04:41:55
【问题描述】：

我在这里有一个典型的 JavaScript 块的示例（将背景样式类应用于表中交替奇数行或偶数行的代码）。我试图在 CoffeeScript 中重写它以尝试学习这一点。 CoffeeScript 的范围语法是不同的，而且更像 Ruby 风格。我真的很感激你将如何做到这一点的例子？

   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')

【问题讨论】：

标签： javascript coffeescript

【解决方案1】：

简洁一点：

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

【讨论】：

太优雅了！你能分解并解释这是怎么回事吗？我是编程新手。 CoffeeScript 文档对于初学者来说仍然太稀疏，但如果我得到一个很好的解释，我可以理解
当然。 “for row, i in list”将为列表中的每个项目运行一个循环，将项目分配给变量“row”，并将当前循环索引号分配给变量“i”。 "$(tbody tr)" 是我们的标签列表。下一行将两种 CSS 颜色中的任何一种分配给变量“color”，具体取决于“i”是偶数还是奇数。最后，第三行使用jQuery的“css”函数来设置“backround-color”的CSS样式。
这太棒了！我不知道如何将索引分配给我可以使用的变量。
如果我想要一列红色，两列蓝色，一列红色，两列蓝色，等等怎么办？你能帮我解决这个问题吗？

【解决方案2】：

您可能还对 jquery 提供的偶数/奇数元选择器感兴趣

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

【讨论】：

【解决方案3】：

如果您的最终目标只是对奇数行/偶数行应用不同的样式，您可以试试这个：

// 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...

【讨论】：

【解决方案4】：

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

【讨论】：