MVC foreachループ内のjqueryを使用してdivにcssクラスを追加

Question

タイトルの状態として。

私のモデル内の特定の値に基づいてヘッダーを追加しようとしています。

現在、このように見えます。それは最初の2行にクラスのトンを追加して動作していないようです

foreach (var track in Model) 
     { 
      if (track.G1) 
      { 
       <script type="text/javascript"> 
        jQuery(".model-attribute-wrapper").addClass("G1"); 
       </script> 
      } 
      else if (track.Handicap) 
      { 
       <script type="text/javascript"> 
        jQuery(".model-attribute-wrapper").addClass("handicap"); 
       </script> 
      } 
      else if (track.Special) 
      { 
       <script type="text/javascript"> 
        jQuery(".model-attribute-wrapper").addClass("special"); 
       </script> 
      } 
      else if (track.BestRight) 
      { 
       <script type="text/javascript"> 
        jQuery(".model-attribute-wrapper").addClass("bestright"); 
       </script> 
      } 
      else if (track.Dirt) 
      { 
       <script type="text/javascript"> 
        jQuery(".model-attribute-wrapper").addClass("dirt"); 
       </script> 
      } 
      if (even) 
      { 
       even = false; 

       <div class="model-attribute-wrapper even"> 
        <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div> 
        <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div> 
        <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div> 
        <div class="model-attribute action"> 
         <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div> 
         <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div> 
        </div> 
       </div> 
      } 
      else 
      { 
       even = true; 
       <div class="model-attribute-wrapper odd"> 
        <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div> 
        <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div> 
        <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div> 
        <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div> 
        <div class="model-attribute action"> 
         <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div> 
         <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div> 
        </div> 
       </div> 
      } 
     } 

徐々に1を追加しないように思われます。

Answer 1

jQueryのready（）のようなものが必要ですが、それぞれがjQuery.ready（）を持っていても、このコードがModelの各トラックに対して実行されるたびに、 「.model-attribute-wrapper」を持ち、クラスの追加を続けるもの。 最後に、最後に実行されたトラックのすべてのクラスがモデルに含まれます。

は、私はあなたが私は実際にそれを異なってfixxed各IDまたは何かによってトラックではなく、一般的なクラス「.MODEL属性ラッパー」

$(document).ready(function(){ 
    $("#trackid").addClass("G1"); // something like this 
}); 

Answer 2

あなたの質問は多少混乱しますが、コンテンツがページに作成される前にクラスを追加しようとしているようです。 jQuery.ready()関数を使用して、DOMの準備が完了するまでクラスの適用を待機する必要があります。学習のための

jQuery(function(){ 
    jQuery(".model-attribute-wrapper").addClass("G1"); 
}); 

参考：たとえば

Answer 3

jQuery .ready()は、あなたの実行環境上のハンドルを取得します。

ページがレンダリングされるときにサーバー上でASP stuffが実行されます。

JavaScriptはブラウザで実行されます（ページのレンダリングが完了した後も）。

また、すべてのjQueryセレクタは同じです。