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

는 점차 하나를 추가 할 것으로 보인다.

Answer 1

여기 뭔가 잘못되었습니다. 물론이 코드는 실행되지 않으며 jQuery.ready()가있는 경우에도이 코드가 Model의 각 트랙에 대해 실행될 때마다 jQuery의 ready()와 같은 것을 필요로합니다. ".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 항목이 실행됩니다.

자바 스크립트는 브라우저에서 실행됩니다 (페이지 렌더링이 완료된 후에도).

또한 모든 jQuery 선택기는 동일합니다.