Wie würden Sie eine alternierende Zeilenfunktion mit Modulus in CoffeeScript schreiben?

Question

Ich habe hier ein Beispiel für ein typisches Stück JavaScript (Code, der eine Hintergrundstilklasse auf eine abwechselnde ungerade oder gerade Zeile in einer Tabelle anwenden würde). Ich versuche, dies in CoffeeScript umzuschreiben, um es zu lernen. Die CoffeeScript-Syntax ist anders und eher Ruby-ähnlich. Ich würde wirklich schätzen ein Beispiel, wie Sie dies tun würde?

   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"; 
         }       
       } 
     } 
    }

Update

Ich benutze JQuery und versuche dies, aber es funktioniert nicht (es macht alle Zeilen #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')

Answer 1

Ein wenig prägnanter:

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

Answer 2

Vielleicht interessieren Sie sich auch für die geraden/ungeraden Metaselektoren von jquery

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

Answer 3

Wenn Ihr Ziel nur darin besteht, einen anderen Stil auf ungerade/gerade Zeilen anzuwenden, können Sie dies versuchen:

// CSS file

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

Hier gibt es kein JS, nur einfaches CSS, was gut ist, da das Styling eine Frage der Präsentation ist.

Sie funktioniert jedoch nur in (relativ) modernen Browsern: IE 9+, Firefox 4+, Chrome...

Answer 4

Versuchen Sie for row, i in rows , donde i enthält den Schleifenzähler.