jquery addclassはクラスを追加していますが表示されていません

Question

perl、mysql、JS/Jqueryを使って動的にhtmlを作成しています...ページの基本構造は複数の繰り返し行を印刷するためにperlループで作成されます

print "<div id='eventList'>"; 
print-loop { 
    <div class="eventRow"> 
     <div class="eventHiddenType">$typeid</div> 
     <div class="colE1">$datestring</div> 
     <div class="colE2">$venue</div> 
     <div class="colE3">$title</div> 
    </div> 
} 
print '</div>' 

実行時に$ varsがDBから正しく抽出されます。隠されたdiv要素に格納されている$型IDはJSで後で使用するためである

（下記参照）

CSSは次のとおりです。

#eventList { width:900px; height: 454px; overflow-x:hidden; overflow-y:scroll; } 
.eventRow { overflow: auto; height: 58px; } 
.eventHiddenType { float:left; display:none; padding: 0px; margin: 0px; } 
.colE1 { float: left; width: 165px; color: #000; } 
.colE2 { float: left; width: 290px; color: #000; } 
.colE3 { float: left; width: 395px; color: #000; } 

.EvDiv0 { background-color: #000000 !important; } // Type 1 
.EvDiv1 { background-color: #C6FFED !important; } // Type 2 
.EvDiv2 { background-color: #B3CCFF !important; } // Type 3 
.EvDiv3 { background-color: #DAB0FF !important; } // Type 4 

HTMLは$を経由してjQueryのからPerlを呼び出すことによって書かれています私は、その後に行をストライプ

：

$(".eventRow:even").css('background-color', '#f3f3f3'); 

... W：アヤックス（偽非同期付き）それはすべきだと思う。

$('.eventRow').each(function() { 
    var hid = 'EvDiv' + $(this).children('.eventHiddenType').text(); 
    $(this).children('.colE1').addClass(hid); 
}); 

：

問題がで.eventHiddenTypeのクラスに隠されたDIVに格納された値に応じて）、次いで.addClass（各列の最初のセルの背景色を変更しようと私にありますソースが正しく（X =隠されたタイプに応じて）正しい「EvDivX」クラス添加

のBuで、すなわち...行ごと...

<div class="colE1 EvDiv3">blah blah blah</div> 

に変更しますブラウザでは背景がレンダリングされません。まるでストライプ全体を通り抜けていたのと同じです。

私もそれを通じ強制だろうと考えたクラスに「！重要な」を追加しようとしたが、それはしませんでした...私は私がすることができますが、私が望む効果を達成するために、他のいくつかの方法があります知っている

なぜこのが動作しないのか分かりません。

は、アクションでそれを参照してください： http://jsfiddle.net/Upland/2KBPU/1/

任意のアイデア？

Answer 1

あなたのCSSに無効なコメントタグがあり、それが原因でCSS解釈の問題が発生しています。 //は無効ですが、/* ... */は無効です。上記のコメントで指摘したように、定義されていないEvDiv4クラスも生成しています。

Updated jsFiddle example。