如何在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中使用模數編寫交替行函數？

回答

相關問題